如何解决vue router的beforeEach校验sessionToken时的无限重定向错误？

问题根源 #

你触发无限重定向的核心原因是路由守卫没有对Login页自身做放行判断：
当检测到无sessionToken时，你重定向到Login页，这次重定向会再次触发router.beforeEach守卫，此时还是无token，会再次触发重定向到Login，形成死循环。
另外你当前的代码只处理了development环境的逻辑，未补充其他环境的next()调用，会导致非开发环境路由卡住无法正常跳转。

修复方案 #

在校验token前先判断当前要访问的路由是不是Login页，如果是直接放行，同时补全非开发环境的路由处理：

router.beforeEach((to, from, next) => {
  if(ENV == 'development') {
    // 先判断目标页是不是登录页，是就直接放行
    if (to.name === 'Login') {
      next()
      return
    }
    let sessionToken = storage.sessionStorageGet('_sessionToken')
    if (sessionToken === null) {
      next({ name: 'Login' })
    } else {
      next()
    }
  } else {
    // 非开发环境也要调用next，否则路由会中断
    next()
  }
})

补充说明 #

• 如果你的Login路由没有配置name属性，可以换成路径判断：if (to.path === '/login')即可，路径和你路由表中配置的Login页路径保持一致即可。
• 后续如果有其他不需要校验token的页面（比如注册页、忘记密码页），都可以加到白名单判断逻辑里。

内容的提问来源于stack exchange，提问作者Laterneman