vue-router的beforeEach导航钩子,next('/')出现死循环问题

为什么next()指定路径会出现死循环

router.beforeEach((to, from, next) => {
  console.log('beforeEach');
  if(true){
    next('/');
  }else{
    next();
 }
});

回答:

next()直接跳转到to.path路径,没有再执行一遍beforeEach导航钩子,next(‘/’)或者next(‘/login’)自己指定路径的,路由跳转的时候还执行一遍beforeEach导航钩子,所以上面出现死循环;
栗子:如我们登录页(’/login’)面进入首页(‘/’),可以这么写:

router.beforeEach((to, from, next) => {
  var userInfo= JSON.parse(sessionStorage.getItem('userInfoStorage'));//获取浏览器缓存的用户信息
  if(userInfo){//如果有就直接到首页咯
    next();
  }else{
    if(to.path=='/login'){//如果是登录页面路径,就直接next()
      next();
    }else{//不然就跳转到登录;
      next('/login');
    }

  }
});

回答:

问题

出现无限循环是因为之前我没有弄清楚next()流程
因为每次跳转到一个路由的时候都会 触发 全局守卫 由于判断条件未改变 所以 一直循环

解决方法

  1. 判断to路由的meta (isRequireAuthTrue)是否为true
  2. 判断是否登陆(isLogin)
// ('/')为登陆界面  
// next() 默认跳转to的path
if(isRequireAuthTrue){
    if(isLogin){
      console.log('导航守卫保护');
      next(); //成功则跳转
    }else {
      console.log('你还没有登陆!');
      next({path:'/'}) //失败则跳转到登陆页面
    }
  }else {
    next();//不需要导航守卫的则直接next跳转
  }

暂无评论

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注