Vue-router路由判断页面未登录跳转到登录页面

时间:2022-05-10
本文章向大家介绍Vue-router路由判断页面未登录跳转到登录页面，主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项，具有一定的参考价值，需要的朋友可以参考一下。
router.beforeEach((to, from, next) => {
  if (to.matched.some(record => record.meta.requireAuth)){  // 判断该路由是否需要登录权限
    if (token) {  // 判断当前的token是否存在
      next();
    }
    else {
      next({
        path: '/login',
        query: {redirect: to.fullPath}  // 将跳转的路由path作为参数，登录成功后跳转到该路由
      })
    }
  }
  else {
    next();
  }
});

在这之前是给路由加一个meta属性：

{
    path: '/index',
    meta: {
      title: '',
      requireAuth: true,  // 添加该字段，表示进入这个路由是需要登录的
    },
}

注意:但是事实是登录的时候大多数时候并不进行跳转，所以这里需要在login跳转的路径中再加一段：

if(this.$route.query.redirect){
//     let redirect = decodeURIComponent(this.$route.query.redirect);
       let redirect = this.$route.query.redirect;
       this.$router.push(redirect);
}else{
       this.$router.push('/');
 }

随机文章
Javascript知识点必读
最近更新