vue-axios interceptors(拦截器)实际应用

问题

在进行敏感操作之前，每个请求需要携带token,但是token 有有效期，token 失效后需要换取新的token并继续请求。

分析

每个请求都需要携带 token ，所以我们可以使用 axios request 拦截器，在这里，我们给每个请求都加 token,这样就可以节省每个请求再一次次的复制粘贴代码。
token 失效问题，当我们token 失效，我们服务端会返回一个特定的错误表示，比如 token invalid，但是我们不能在每个请求之后去做刷新 token 的操作呀，所以这里我们就用 axios response 拦截器，我们统一处理所有请求成功之后响应过来的数据，然后对特殊数据进行处理，其他的正常分发。

实现

安装axios :npm i axios

在 main.js 注册 axios

import axios from 'axios'
Vue.prototype.$axios = axios;
// axios.defaults.baseURL = 'http://aaa.com/bb'

axios.interceptors.request.use(
 config => {
     
  config.baseURL = '/api/'
  config.withCredentials = true // 允许携带token ,这个是解决跨域产生的相关问题
  config.timeout = 6000
  let token = sessionStorage.getItem('access_token')
  let csrf = store.getters.csrf
  if (token) {
     
   config.headers = {
     
    'access-token': token,
    'Content-Type': 'application/x-www-form-urlencoded'
   }
  }
  if (config.url === 'refresh') {
     
   config.headers = {
     
    'refresh-token': sessionStorage.getItem('refresh_token'),
    'Content-Type': 'application/x-www-form-urlencoded'
   }
  }
  return config
 },
 error => {
     
  return Promise.reject(error)
 }
)
//在 response 拦截器实现

axios.interceptors.response.use(
 response => {
     
  // 定时刷新access-token
  if (!response.data.value && response.data.data.message === 'token invalid') {
     
   // 刷新token
   store.dispatch('refresh').then(response => {
     
    sessionStorage.setItem('access_token', response.data)
   }).catch(error => {
     
    throw new Error('token刷新' + error)
   })
  }
  return response
 },
 error => {
     
  return Promise.reject(error)
 }
)