唯品秀前端博客
当前位置: 前端开发 > Vue.js专区 > vue路由守卫beforeEach死循环Uncaught RangeError: Maximum call stack size exceeded

路由守卫大家应该都不陌生,主要就是两个钩子函数,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'})
    }
  }
});

「梦想一旦被付诸行动,就会变得神圣,如果觉得我的文章对您有用,请帮助本站成长」

赞(0) 打赏
谢谢你请我吃鸡腿*^_^*

支付宝扫一扫打赏

微信扫一扫打赏

标签:

上一篇:

下一篇:

相关推荐

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

最新评论

    暂无留言哦~~

博客简介

一个关注Web前端开发技术、关注用户体验、坚持更多原创实战教程的个人网站,梦想一旦被付诸行动,就会变得神圣,愿景:成为宇宙中最具有代表性的前端技术类博客。主题源码 

精彩评论

友情链接

他们同样是一群网虫,却不是每天泡在网上游走在淘宝和网游之间、刷着本来就快要透支的信用卡。他们或许没有踏出国门一步,但同学却不局限在一国一校,而是遍及全球!申请交换友链

站点统计

  • 文章总数: 276 篇
  • 草稿数目: 0 篇
  • 分类数目: 15 个
  • 独立页面: 7 个
  • 评论总数: 976 条
  • 链接总数: 11 个
  • 标签总数: 474 个
  • 注册用户: 2 人
  • 访问总量: 8,751,242 次
  • 最近更新: 2020年11月25日
服务热线:
 173xxxx7240

 QQ在线交流

 旺旺在线