[ 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)
  }
)