唯品秀前端博客
当前位置: 前端开发 > Vue2.js专栏 >

vue路由守卫beforeEach死循环Uncaught RangeError: Maximum call stack size exceeded

作者：管理员 2019-08-20 15:36:53 分类：Vue2.js专栏 阅读（4412） 0

路由守卫大家应该都不陌生，主要就是两个钩子函数，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
赞(1) 打赏
标签：

上一篇：

下一篇：

相关推荐

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

表情

最新评论

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

支付宝扫一扫打赏

微信扫一扫打赏