vue 登录界面无法跳转问题

最新推荐文章于 2024-10-15 18:14:03 发布

原创最新推荐文章于 2024-10-15 18:14:03 发布 · 8.6k 阅读

7 ·

CC 4.0 BY-SA版权

vue 专栏收录该内容

157 篇文章

订阅专栏

本文探讨了在Vue项目中实现登录页面跳转至主页的功能遇到的问题及解决办法。作者发现由于token设置在跳转之前导致了循环跳转的问题。

1. 在试着用vue写一个登录页面，已经调试好了，登录成功后，跳转到主页面。但是加了拦截器后，不会跳到主页面

{
  path: '/',
  name: 'Home',
  meta:{isLogin:true},// 添加该字段，表示进入这个路由是需要登录的
  component: Index
},

// 路由守卫
router.beforeEach((to,from,next)=>{
  if(to.matched.some(res=>res.meta.isLogin)){//判断是否需要登录
    if (localStorage['token']) {
      next();
    }else{
      next({
        path:"/login"
      });
    }
  }else{
    next()
  }
});

加入拦截器后，拦截功能正常，跳转功能不正常了，一直都在登录界面，登录成功，token也写入缓存了，但是就是不会跳转，看拦截器代码也没问题，后来看登录的代码才发现了问题所在。我的跳转的代码是在写token之前的。所以跳转页面的时候，没有token就又返回到login页面，然后一直循环了