vue实现登陆失效重定向

main.js
设置路由守卫

router.beforeEach((to, from, next) => {

  CancelRequest() // 取消上个页面未加载请求

  if(!to.meta.notReqLogin){
    const uid = auth.getAdminInfo('uid');  //每次跳转路由前校验cookie  没有则重定向到/login

    if(uid){
      next()
    }else{
      next({
        path:'/login',
        query: {redirect: to.meta.fullPath} //登陆失效跳转到login 并记录登陆前路由地址
      });
    }

  }else{
    next()
  }
})

login.vue

监听路由变化

        watch:{
       	//监听路有变化，获取退出登陆前路由地址
          $route:{
            handler:function(route){
              const query = route.query
              if(query){
                this.redirect = query.redirect;
              }

            },
            immediate:true
          },
        }

登陆成功后跳转

  /**
           * 登陆
           * */
          async login(){

            const _account = this.account;
            const _pwd = this.pwd;

            if(_account&&_pwd != ''){

              reqLogin(_account,_pwd)
                .then( res => {
                  const seeionId = reqSeeionId()
                  return Promise.resolve(seeionId)
                })
                .then( res => {
                  auth.setAdminInfo('uid' ,_account) // 设置登陆存入id cookie
                  this.$router.push({path: this.redirect || '/' })
                })

            }
          },

本文地址：https://blog.csdn.net/bjl008/article/details/107427478