vue路由拦截记录登录状态

先说下逻辑。

首先在vuex里面 state存下token值

export default{

  Authorization: localStorage.getItem('Authorization') ? localStorage.getItem('Authorization') : ''
}

然后在mutation.js写

changeLogin (state, user) {
    state.Authorization = user.Authorization;
    //alert(user.Authorization)
    localStorage.setItem('Authorization', user.Authorization);
  },

第一步，肯定是要点击登录按钮，这时后台会在成功后给你返回信息，其中就有token值，然后直接存进localStorage

axios.post(BASE_URL+'/api/user/mobilelogin',qs.stringify(f),config).then(res => {
            if(res.data.code==0){
              this.isTishi=true
              this.tishi='验证码不正确'
            }else{
              _this.userToken =  res.data.data.userinfo.token;
              var balance= res.data.data.userinfo.money
              var username= res.data.data.userinfo.username
              this.$Modal.success({
                title: '成功',
                content: '登录成功',
                onOk: () => {
                  _this.changeLogin({ Authorization: _this.userToken });
                  this.$store.commit('set_money',balance)
                  this.$store.commit('set_userName',username)
                  this.$router.push({
                    path:'/superSignatureAread'
                  })
                }
              });


            }

          }, err => {
            console.log(err)
          })

第二步：在main.js里面写路由拦截，如下：

//判断是否需要登录权限 以及是否登录
router.beforeEach((to, from, next) => {
 if (to.matched.some(res => res.meta.requireAuth)) {// 判断是否需要登录权限
    if (localStorage.getItem('Authorization')){// 判断是否登录
      next()
    } else {// 没登录则跳转到登录界面
      console.log(to)
      console.log(to.fullPath)
      next({
        path: '/login',
        query: {redirect: to.fullPath}
      })
    }
  } else {
    next()
  }
})

第三步：在你的路由文件里面写下那些路由需要判断是否登录

 {
      path: '/',
      name: 'superSignature',
      component: superSignature, 
      meta: {
        requireAuth: false  //判断是不是需要登录状态
      }
    }