beforeEach钩子，next('/login') 跳转问题，无线循环导致Maximum call stack size exceeded问题

最新推荐文章于 2023-07-16 21:37:28 发布

原创最新推荐文章于 2023-07-16 21:37:28 发布 · 1.8k 阅读

3 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

vue 专栏收录该内容

22 篇文章

订阅专栏

本文详细解析了在Vue项目中使用路由守卫时，因未正确处理登录页面路径而导致的死循环问题。通过一个具体示例，阐述了如何避免在检查用户登录状态时陷入无限循环，并提供了解决方案。

好久没写vue了，今天突然犯了一个致命的小错误，代码如下：

routes.beforeEach((to, from, next) => {
  if (sessionStorage.getItem('token')) {
    next();
  } else {
    next('/login');
  }
});

貌似一看没问题，但是却陷入了死循环，最后导致栈溢出。

原因：没有排除当前地址，就是/login地址，导致了循环调用。

解决如下：

routes.beforeEach((to, from, next) => {
  if (sessionStorage.getItem('token')) {
    next();
  } else {
    //如果是登录页面路径，就直接next()
    if (to.path === '/login') {
      next();
    } else {
      next('/login');
    }
  }
});

判断如果是登录页就放行，这样就不会死循环了。