Question

我正在尝试找到将未经身份验证的用户重定向到登录页面/屏幕的最佳方法。目前，我正在尝试在加载组件之前在路由中捕获JWT令牌的身份验证。但是，我陷入了router.beforEach()的无限循环中：

router.beforeEach((to, from, next) => {
  if (to.matched.some(r => r.meta.requiresAuth)) {
    alert('needs auth!'); // used for testing
    if (localStorage.getItem('jwt') == null) {
      next('/login'); // here is where the infinite loop hits
    } else {
      next();
    }
  } else {
    next();
  }
});

当我到达需要认证的路由时，next('/login')调用陷入无限循环。我可以这样避免：

if (to.path !== '/login') {
    next('/login');
} else {
    next();
  }

但这会两次发出警报，似乎是解决此问题的一种低效和/或骇人听闻的方法。有没有比这更好的方法来测试路线条件了？感谢您的提示，建议和帮助

Answer 1

我不认为这很hacky。

if (to.path !== '/login') {
    next('/login');
}

在更改路线时，它自然会再次触发router.beforeEach。

您可以将其移至if (to.matched.some(r => r.meta.requiresAuth)) {上方，以避免不必要地使用

进行该检查

if (to.path === '/login') {
    next();
}

另一种选择是用SPA跳出window.location，但我认为这不是更好。

具有重定向路由的Vue-Router无限循环

1 个答案: