唯品秀前端博客

路由守卫大家应该都不陌生,主要就是两个钩子函数,beforeEach和afterEach,当然还有局部方法,其实同理,就换个名字。如下场景,我们可能很容易导致页面死循环,控制台报错,Uncaught RangeError: Maximum call stack size exceeded。需求:当我们没有登录的时候,跳转到登录页面。如果登录了,则正常跳转。

死循环代码

1
2
3
4
5
6
7
8
router.beforeEach((to, from, next) => {
  let token = sessionStorage.getItem('token');
  if (token) {
    next();
  } else {
    next({path: '/login'})
  }
});

修改代码

当 token 不存在于session中,跳转到/login,此时路由改变,再次进行判断,则又跳转到 /404,由此造成了死循环。在代码中进行一次判断,如果跳到login了,就让它安心的进路由吧。修改后代码如下

1
2
3
4
5
6
7
8
9
10
11
12
router.beforeEach((to, from, next) => {
  let token = sessionStorage.getItem('token');
  if (token) {
    next();
  } else {
    if (to.path == '/login') {
      next();
    } else {
      next({path: '/login'})
    }
  }
});
本站所有文章、图片、资源等如无特殊说明或标注,均为来自互联网或者站长原创,版权归原作者所有;仅作为个人学习、研究以及欣赏!如若本站内容侵犯了原著者的合法权益,可联系我们进行处理,邮箱:343049466@qq.com
赞(0) 打赏
标签:

上一篇:

下一篇:

相关推荐

0 条评论关于"vue路由守卫beforeEach死循环Uncaught RangeError: Maximum call stack size exceeded"

表情

最新评论

    暂无留言哦~~
谢谢你请我吃鸡腿*^_^*

支付宝扫一扫打赏

微信扫一扫打赏