最近在項目開發中，遇到下面這樣一個問題：

　　在進行數據請求之前，每個請求需要攜帶token, 但是token 有有效期，token 失效后需要換取新的token并繼續請求。

　　需求分析

　　每個請求都需要攜帶 token ，所以我們可以使用 axios request 攔截器，在這里，我們給每個請求都加 token,這樣就可以節省每個請求再一次次的復制粘貼代碼。

　　token 失效問題，當我們token 失效，我們服務端會返回一個特定的錯誤表示，比如 token invalid，但是我們不能在每個請求之后去做刷新 token 的操作呀，所以這里我們就用 axios response 攔截器，我們統一處理所有請求成功之后響應過來的數據，然后對特殊數據進行處理，其他的正常分發

　　功能實現

　　分析完問題后，我們來實現功能

　　安裝axios, 這里我們就不再贅述怎么安裝axios.

　　在 main.js 注冊 axios

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

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

1、請求攔截器

• 請求攔截器的作用是在請求發送前進行一些操作，例如在每個請求體里加上token，統一做了處理如果以后要改也非常容易。

axios.interceptors.request.use(function (config) {
    // 在發送請求之前做些什么，例如加入token
    .......
    return config;
  }, function (error) {
    // 對請求錯誤做些什么
    return Promise.reject(error);
  });

2、響應攔截器

• 響應攔截器的作用是在接收到響應后進行一些操作，例如在服務器返回登錄狀態失效，需要重新登錄的時候，跳轉到登錄頁。

axios.interceptors.response.use(function (response) {
    // 在接收響應做些什么，例如跳轉到登錄頁
    ......
    return response;
  }, function (error) {
    // 對響應錯誤做點什么
    return Promise.reject(error);
  });

3、移除攔截器

var myInterceptor = axios.interceptors.request.use(function () {/*...*/});
axios.interceptors.request.eject(myInterceptor);