Vue 之vue-router router.beforeEach导航守卫,陷入死循环

官方文档 :https://router.vuejs.org/zh/guide/advanced/navigation-guards.html

判断浏览器缓存是否有用户的信息,没有的话跳转登录页。
看了官方文档,直接这样写了。(试了手动清除缓存,再从url里面跳登录页,直接陷入了死循环)

router.beforeEach((to,from,next)=>{
  if(sessionStorage.getItem('loginData')){
    Toast('跳转成功');
    next();
  }else {
    //没有登录,去跳转登录页
    next({
      path:'/login'
    });
  }
});

原因是由于 next('/login')是自己指定路径的,路由跳转的时候还执行一遍beforeEach导航钩子,所以上面出现死循环;

再加个判断就OK了

router.beforeEach((to,from,next)=>{
  // console.log(to);
  // console.log(from);
  if(sessionStorage.getItem('loginData')){
    Toast('跳转成功');
    next();
  }else {
    //没有登录,去跳转登录页
    if(to.path === '/login'){
      next();
    }else {
      next({
        path:'/login'
      });
    }
  }
});

 

你可能感兴趣的:(Vue.js)