使用 Vue-Router 处理电子邮件确认重定向



我正在从事使用Vue.js构建前端的项目,并且Auth0被用作IDP。

当用户首次注册并登录时,他们将被路由到/verify-email其中包含一条注释,要求他们检查电子邮件以验证其帐户。

单击电子邮件确认链接后,我期待以下请求:

http://localhost:3000/?supportSignUp=true
&supportForgotPassword=true
&email=john.doe%40exampleco.com
&message=Your%20email%20was%20verified.%20You%20can%20continue%20using%20the%20application.
&success=true#/register

由于它与 SPA 有关,Auth0 的文档建议按如下方式处理请求:

var express = require('express');
var router = express.Router();
var qs = require('qs'); // to read query string params and stringify them
router.get('/register', function(req, res, next) {
var route = req.query.route; // retrieve the route param that contains the SPA client side route user needs to be redirected to.
delete req.query.route; // remove it from query params.
res.redirect('http://localhost:3000/#/' + route + '?' +  qs.stringify(req.query)); // Send a 302 redirect for the expected route
});
module.exports = router;

我的项目使用 Vue-Router 而不是 Express 来处理路由,所以我遵循了相关文档并执行以下操作:

{
path: '/account-confirmed/:emailVerificationParams',
redirect: to => {
return { path: '/', query: { q: to.params.emailVerificationParams } }
},
},

当用户确认其帐户时,他们将被发送到/account-confirmed,而又应将他们重定向到/,这是一个受保护的路径,并应提示他们在访问应用程序之前输入其登录凭据。

当我通过运行以下命令在 url 中手动测试它时,重定向工作正常:

http://localhost:3000/?supportSignUp=true
&supportForgotPassword=true
&email=john.doe%40exampleco.com
&message=Your%20email%20was%20verified.%20You%20can%20continue%20using%20the%20application.
&success=true#/register

或:

http://cf_distribution_url/?supportSignUp=true
&supportForgotPassword=true
&email=john.doe%40exampleco.com
&message=Your%20email%20was%20verified.%20You%20can%20continue%20using%20the%20application.
&success=true#/register

通过运行,我的意思是我通过在浏览器的 url 地址栏中手动输入它们来导航到 url,就像我想访问GoogleFacebookStack Overflow的网站一样。

但是,当我单击电子邮件确认链接时,重定向不起作用。我收到 403 错误作为响应,而我希望系统提示我再次登录。

考虑到这一点,我有两个问题:

  1. 我当前的重定向实现有什么问题?
  2. 我该如何解决?

随着时间的流逝,问题更多地在于Auth0而不是Vue。为了解决我的问题,我只需要在 OIDC 中强制重新进行身份验证

最新更新