如何通过VUE请求拦截器添加token

原理

axios有一个请求拦截器机制，所有的axios请求在发出来之前都会经过请求拦截器, 在请求或响应被 then 或 catch 处理前拦截它们检查vuex中是否有token信息，有就直接加在headers中。

---

代码实现

// 在普通的.js模块中去使用store需要import导入
import store from '../store/index.js'

// 添加请求拦截器
instance.interceptors.request.use(function (config) {      
  const token = store.state.tokenInfo.token 
  // 如果有token就带上将token添加到config.headers.Authorization中
  if (token) {            
    config.headers.Authorization = `Bearer ${token}`
  }
  return config
}, function (error) {
  return Promise.reject(error)
})