vue路由报错Maximum call stack size exceeded

原创已于 2024-04-17 14:00:00 修改 · 4.8k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端

于 2022-10-17 16:46:44 首次发布

vue 专栏收录该内容

30 篇文章

订阅专栏

这篇博客探讨了在前端路由中如何设置守卫来处理登录逻辑，防止无限循环和内存溢出。通过检查token是否存在，决定是否允许访问特定路径，如登录页。若token存在但尝试访问登录页，则重定向到主页；反之，若无token且尝试访问非登录页，则引导至登录页。同时，还涉及了动态添加路由和存储用户权限的细节。

在这里插入图片描述

router.beforeEach((to, from, next) => {
  NProgress.start();
  const query = to.query.token
  //请求地址带token
  if (query) {
    sessionStorage.setItem("token", query)
    next()
  }
  if (to.path === '/login') {
    console.log(111);
    next()
  }
  const token = sessionStorage.getItem("token")
  // 不加to.path!=="login"会导致内存溢出,
  if (!token && to.path !== '/login') {
    console.log(222);
    next('/login')
  }
  // 其他的都放行
  next()
})
router.afterEach(() => {
  NProgress.done();
});

因为if判断里的条件只要满足都会执行，而执行顺序是从上而下。所以，如果第3个判断不加to.path!==“login”，那么默认会先打印222，并跳登录，当匹配到跳登录时，打印111，并跳转，同时下面的没有token的判断也会执行，打印222，并跳转。。。这样就循环往复，进入了死循环，导致超过最大调用堆栈大小。

router.beforeEach((to, from, next) => {
 const token = sessionStorage.getItem('token')
 // 存在 token 说明已经登录
 if (token) {
   // 登录过就不能访问登录界面，需要中断这一次路由守卫，执行下一次路由守卫，并且下一次守卫的to是主页'
   if (to.path === '/login') {
     next({ path: '/' })
   }
   // 保存在store中路由不为空则放行 (如果执行了刷新操作，则 store 里的路由为空，此时需要重新添加路由)
   if (store.getters.routeList.length ) {
     //放行
     next()
   } else {
     // 将路由添加到 store 中，用来标记已添加动态路由
     store.commit('ADD_ROUTER', '需要添加的路由')
     router.addRoutes('需要添加的路由')
     // 如果 addRoutes 并未完成，路由守卫会一层一层的执行执行，直到 addRoutes 完成，找到对应的路由
     next({ ...to, replace: true })
   }
 } else {
   // 未登录时，注意 ：在这里也许你的项目不只有 logon 不需要登录 ，register 等其他不需要登录的页面也需要处理
   if (to.path !== '/login') {
     next({ path: '/login' })
   } else {
     next()
   }
 }