image.png

说明: axios有一个请求拦截器机制,所有的axios请求在发出去之前都会经过请求拦截器

通俗来将讲就是:　拦截器是一道道门，每经过一扇，就给你有一个token

格式: (前提是需要先把token保存在vuex上面,这一部分在token中)

在axios请求拦截器中添加token:

  1. // 如何取出vuex中保存的数据？
  2.   //    1. vue组件中：      this.$store.state.tokenInfo.token
  3.   //    2. 在普通的.js文件中： import store from '@/store/index.js'
  6. // 请求拦截器
  7. request.interceptors.request.use(function (config) {
  8.    console.log('如何取出vuex中保存的数据？', store)
  9.   const token = store.state.tokenInfo.token
  10.   console.log('config', config)
  11.    if (token) {
  12.     config.headers.Authorization = `Bearer ${token}`
  13.   }
  14.   return config
  15. }, function (error) {
  16.   // 对请求错误做些什么
  17.   return Promise.reject(error)
  18. })
  20. 省略其他...

只要本地vuex中有了token，则所有的请求在发出去之前就会自动添加token.

在login成功之后 => 获取token => 通过请求拦截器自动附加到headers中 => 然后发出请求

报错:

image.png