vue实现token登录

用token实现登录的是利用vuex来进行管理，具体思路如下
1.在用户登录后获取到用户的登录信息，并获取信息中的token值将token放入sessionStroge中

       //省略请求过程
        if (res.data.code == '00000') {//请求成功
            this.$message.success('登录成功')
            sessionStorage.setItem('userName', res.data.data.userName)
            sessionStorage.setItem('token', res.data.data.token)
            this.$store.state.loginBoo = true
            this.$router.push({ path: '/Index' })
          } else {//请求失败
            this.$message.error('登录失败,请重新登录')
            }

3.在store/index.js，利用vuex获取sessionStroge中的token值

export default new Vuex.Store({
  state: {
    //token
    token: window.sessionStorage.getItem("token") ? window.sessionStorage.getItem("token") : '',
  }
})

4.在main.js中进行路由跳转的判断，当有token时进入登入页面，没有时返回登录页

//导航守卫
router.beforeEach((to, from, next) => {
  if (to.path === '/login') {
    next();
  } else {
    let token = this.$store.state.token;//获取vuex中token的值
 
    if (token === 'null' || token === '') {
      next('/login');
    } else {
      next();
    }
  }
})

5.如果用户退出登录，清除token，并返回登录页面

sessionStorage.clear()
this.$router.push({path: '/Login'})

以上就是vue实现token登录的方式，如果觉得有用请多多关注点赞，博主会分享自己使用的过程中遇到的难点问题，大家共同进步！