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