zoukankan      html  css  js  c++  java
  • 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('/');
     }
  • 相关阅读:
    功能规格说明书
    绝望的作业
    php闭包
    php isset emtpy
    PHP超级全局变量、魔术变量和魔术函数
    死锁的一个例子
    php session cookie
    http状态码301、302
    php浮点数
    学过的设计模式
  • 原文地址:https://www.cnblogs.com/beileixinqing/p/7729780.html
Copyright © 2011-2022 走看看