router.beforeEach死循环原因解决

最新推荐文章于 2024-06-25 13:45:37 发布

瑆箫

最新推荐文章于 2024-06-25 13:45:37 发布

阅读量5.8k

点赞数 5

本文链接：https://blog.csdn.net/mo3408/article/details/103811099

版权

web 同时被 2 个专栏收录

205 篇文章 8 订阅 ¥129.90 ¥299.90

订阅专栏

超级会员免费看

vue

33 篇文章 0 订阅

订阅专栏

本文探讨了Vue Router中beforeEach钩子函数导致的死循环问题。当通过token值判断用户登录状态时，如果不正确设置判断条件，可能导致无限循环。解决方案是确保在用户访问登录页时不触发钩子，只有在token不存在且尝试访问非登录页时才重定向至登录页。同时，当token存在且用户尝试访问登录页时，应直接进入首页。

摘要由CSDN通过智能技术生成

在通过判断token的值来确定用户是不是已经登录，如果没有登录的用户只能访问登录页

router.beforeEach((to, from, next) => {
  
  let token = window.localStorage.getItem('token');
  if( !token){
    next({path: '/'})
  } else {  
      next()
    }
})

以上这代码就是个死循环，因为没有出口，没有判断什么情况下不进行循环

所以只要确定当页面是登录页面的钩子就不让他循环下去

当跳转路径不是登录页并且token值不存在时才让他跳登录页，如果是登录就正常跳不要进入循环

router.beforeEach((to, from, next) => {
  
  let token = window.localStorage.getItem('token');
  debugger
  if(to.path!='/' && !token){
    next({path: '/'})
  } else {  
      next()
    }
})

还有就是当token存在时，用户输入登录页面也让他进入到首页，

当to.path是登