项目背景

最近在项目开辟中，碰到下面如许一个题目：

在举行铭感操纵之前，每一个要求须要照顾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)
  }
)