vue 一直登录错误_vue中路由拦截无限循环的情况

如下图，浏览器报出这个错误

这是因为路由守卫在拦截路由的时候，找不到跳转的地址，引起了无限循环。

在设置路由拦截的时候当指向另一个地址的时候还会触发一次路由拦截，既每次地址栏的变化都会触发一次路由拦截，在没有token值的时候会一直向404跳转，所以会出现无限循环的情况

需要在进行跳转的时候有一个满足跳转条件的来阻止跳转带来的路由拦截

---

下面是一段完整的路由拦截代码

router.beforeEach ((to,from,next) => {
  //将所有需要登陆才显示的页面的路由都放进一个数组
  const nextRoute = ['index', 'library', 'design', 'administration', 'production'];
  //获取登陆状态
  let isLogin = Global.isLogin
 
  if(to.name === 'login') {  //如果是登录页，则跳过验证
    next()  //必不可少
    return  //以下的代码不执行
  }
  if(nextRoute.indexOf(to.name) >= 0) {  //判断该页面是否需要登陆
    if(!isLogin) {   //判断登陆状态
      next({ name : 'login'})   //如果未登录，则跳转到登录页
    } else {
      next()  //如果已经登陆，那就可以跳转
    }
  } else {  //其他的无需登陆的页面不做验证
      next()
  }
   
})

---

下面是会引起无限循环的代码：

if(isLogin) {
    next()
  } else {
    next({ name: 'login')}
  }

这样的话就会陷入无限循环

因为你的next({ name: 'login')}是相当于一个路由跳转，它会再次触发全局路由守卫，你又进入了全局路由守卫进行再次判断，如此循环。

所以，想要结束路由守卫，整段代码的逻辑必须由 next() 进行结尾。

if(to.name === 'login') { 
    next() 
    return  
  }

---

另外，控制路由白名单的代码如下：

const whiteList = ['login', 'forgetPW', 'unlocking', 'Dashboard', 'register'] // no redirect whitelist

//在白名单里的路由不需要验证，直接进入下一个路由
if (whiteList.indexOf(to.name) !== -1) {
      // in the free login whitelist, go directly
      next()
      NProgress.done()
      return
    }

在白名单里的路由添加在constRouter.js中：

// 路由白名单
var constRouters = [
  {
    path: '/login',
    name: '登录页',
    component: LoginView,
  },
  {
    path: '/index',
    name: '首页',
    redirect: '/login'
  },
  {
    path:'/forgetStepOne',
    name:'forgetStepOne',
    component: ()=>import('../views/forgetPassword/ForgetStepOne.vue')
  },
  {
    path:'/forgetStepTwo',
    name:'forgetStepTwo',
    component: ()=>import('../views/forgetPassword/ForgetStepTwo.vue')
  },
  {
    path:'/forgetStepThree',
    name:'forgetStepThree',
    component: ()=>import('../views/forgetPassword/ForgetStepThree.vue')
  }, 
  {
    path:"/browserVersionReminder",
    name:"浏览器版本提醒",
    component: ()=>import('../views/error/BrowserVersionReminder')
  }
]
export default constRouters

待补充