[ Vue ] 网络请求之 interceptors 实际应用

项目背景

最近在项目开发中，遇到下面这样一个问题：

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

需求分析

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

功能实现

分析完问题后，我们来实现功能

1. 安装axios, 这里我们就赘述怎么安装axios.
2. 在 main.js 注册 axios

Vue.use(Vuex)
Vue.use(VueAxios, axios)
Vue.use(qs)

注：qs，使用axios，必须得安装 qs，所有的Post 请求，我们都需要 qs,对参数进行序列化。

1. 在 request 拦截器实现

axios.interceptors.request.use(
  config => {
    config.baseURL = '/api/'
    config.withCredentials = true // 允许携带token ,这个是解决跨域产生的相关问题
    config.timeout = 2500
    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)
  }
)

1. 在 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)
  }
)