当前位置： 移动技术网 > IT编程>开发语言>JavaScript > vue实现登陆失效重定向

vue实现登陆失效重定向

2020年07月23日  | 移动技术网IT编程  | 我要评论

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

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网