vue cli中token验证

Posted 2021-03-06 sexintercourse

1.设置前端路由跳转

router.beforeEach((to, from, next) => {
if (to.matched.some(route => route.meta.auth)) {
// 判断token是否存在，如果存在则正常跳转
if (localStorage.getItem(‘token‘)) {
next()
} else {
next(‘/login‘)
}
} else {
next()
}
})

 这里我们只是列举了一部分的代码，全量的代码请查看。

import Vue from ‘vue‘
import Router from ‘vue-router‘
import HelloWorld from ‘@/components/HelloWorld‘
import StudentsInfo from ‘@/components/StudentsInfo‘
import Login from ‘@/components/Login‘

Vue.use(Router)

let router = new Router({
  routes: [{
      path: ‘/‘,
      name: ‘HelloWorld‘,
      component: HelloWorld
    },
    {
      path: ‘/StudentsInfo‘,
      name: ‘StudentsInfo‘,
      component: StudentsInfo
    },
    {
      path: ‘/Login‘,
      name: ‘Login‘,
      component: Login
    }
  ]
})

// 导航守卫
// 使用 router.beforeEach 注册一个全局前置守卫，判断用户是否登陆
router.beforeEach((to, from, next) => {
  if (to.path === ‘/Login‘) {

    next();
  } else {
    let token = localStorage.getItem(‘Authorization‘);
    if (token === null || token === ‘‘) {
      next(‘/Login‘);
    } else {
      next();
    }
  }
});

export default router;

 

2.登录成功，将token存储

login () {
// 发起请求登录
axios.post(‘/user/login‘, this.user).then(res => {
console.log(res.data)
// 接收到token后将token存储到localstorage
// 前缀必须要加
localStorage.setItem(‘token‘, "Bearer " + res.data.res.token)
})
}

 

3.设置请求拦截器
 

只要有token就让每次请求都携带token

// 设置请求拦截器
axios.interceptors.request.use(config => {
// console.log(config)
const token = localStorage.getItem(‘token‘)
if (token) {
// 将获取到的token设置给header中的Authorization
config.headers.Authorization = token
}
return config
})

 

4设置响应拦截器

 对响应结果进行处理，token出现问题，返回一定是401

// 设置响应拦截器
axios.interceptors.response.use(res => {
// 对结果进行处理
if (res.data.res_code === 401) {
// 跳转登录
router.replace(‘/login‘)
// 删除token
localStorage.removeItem(‘token‘)
}
return res
}, err => {
// 如果是正常接口，会走err，err.response.status值为401 进行跳转及删除token的操作
})