欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

vue实现登陆失效重定向

程序员文章站 2022-03-11 23:25:12
main.js设置路由守卫router.beforeEach((to, from, next) => { CancelRequest() // 取消上个页面未加载请求 if(!to.meta.notReqLogin){ const uid = auth.getAdminInfo('uid'); //每次跳转路由前校验cookie 没有则重定向到/login if(uid){ next() }else{ next({...

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