vue 攔截器，增加token參數

1.使用請求攔截器，攔截vue所有請求，增加token參數

      使用倒數計時，假如token有效期60分鐘，會在59分鐘的時候去重新拿着refresh_Token，去請求新的token.

     注意：如果一個賬號允許多人登錄使用，上述方法沒有問題，但是如果一個賬號只允許一人登錄，一個地點登錄，那上述方法就不那麼全面，這時候可以採用使用響應攔截器，攔截狀態碼進行對應的異常處理，然後判斷哪些是token失效，再進行對應的登出操作或者是重新獲取token。

2.完整代碼

import axios from 'axios'
import { getToken } from '@/utils/auth'
import { getToken_refresh } from '@/api/users'
import router from '../router/index';

// 創建axios實例
const service = axios.create({
  baseURL: 'http://122.152.250.75:10101', // api的base_url
  // baseURL: 'http://127.0.0.1:8081/auth',
  timeout: 10000 // 請求超時時間
})

/*是否有請求正在刷新token*/
window.isRefreshing = false
/*被掛起的請求數組*/
let refreshSubscribers = []

/*獲取刷新token請求的token*/
function getRefreshToken () {
  return localStorage.getItem("refresh_token")
}

/*push所有請求到數組中*/
function subscribeTokenRefresh (cb) {
  refreshSubscribers.push(cb)
}

/*刷新請求（refreshSubscribers數組中的請求得到新的token之後會自執行，用新的token去請求數據）*/
function onRrefreshed (token) {
  refreshSubscribers.map(cb => cb(token))
}

// request 請求攔截器
service.interceptors.request.use(config => {
  if (getToken()) {
    config.params['access_token'] = getToken() // 讓每個請求攜帶自定義token 請根據實際情況自行修改
    /*判斷token是否將要過期*/
    var istoken = isTokenExpired();
    if (istoken) {
      /*判斷是否正在刷新*/
      if (!window.isRefreshing) {
        /*將刷新token的標誌置爲true*/
        window.isRefreshing = true
        /*發起刷新token的請求*/
        var params = {
          refresh_token: localStorage.getItem('refresh_Token'),
        };
        getToken_refresh(params).then((res) => {
          /*將標誌置爲false*/
          window.isRefreshing = false
          /*成功刷新token*/
          // config.headers.Authorization = res.data.data.token_type + ' ' + res.data.data.token
          /*更新auth*/
          if(res.data.code == 0){
            alert("登錄超時，請重新登錄");
            router.push({ path: '/login' })
            return
          }
          localStorage.setItem('Token',res.data.data.access_token);
          localStorage.setItem('refresh_Token',res.data.data.refresh_token);
          localStorage.setItem("expired_at",res.data.data.expired_at);
          config.params['access_token'] = getToken()
          /*執行數組裏的函數,重新發起被掛起的請求*/
          onRrefreshed(res.data.data.access_token)
          /*執行onRefreshed函數後清空數組中保存的請求*/
          refreshSubscribers = []
        }).catch(err => {
          alert(err.response.data.message)
          /*清除本地保存的auth*/
          // localStorage.removeItem('auth')
          window.location.href = '#/login'
        })
      }
      /*把請求(token)=>{....}都push到一個數組中*/
      let retry = new Promise((resolve, reject) => {
        /*(token) => {...}這個函數就是回調函數*/
        subscribeTokenRefresh((token) => {
          // config.headers.Authorization = 'Bearer ' + token
          config.params['access_token'] = token
          /*將請求掛起*/
          resolve(config)
        })
      })
      return retry
    }
  }else{
    router.push({ path: '/login' })
  }
  return config
}, error => {
  // Do something with request error
  console.log("11111"+error) // for debug
  Promise.reject(error)
})

// response 響應攔截器
service.interceptors.response.use(
  response => {
    // console.log(response)
    if (response.status !== 200) {
      if(response.status === 500) { // 服務器斷開
        this.$message({
          showClose: true,
          message: '服務器斷開，請稍後重試。',
          type: 'error'
        });
      }
      return Promise.reject(new Error(response.message || 'Error'))
    } else {
      return response
    }
  },error => {
    // console.log("cesc"+error)
    if (error.response.status === 401) { // token失效 ,重新獲取token
        var params = {
          refresh_token: localStorage.getItem('refresh_Token'),
        };
        getToken_refresh(params).then((res) => {
          /*更新auth*/
          if(res.data.code == 0){
            alert("登錄超時，請重新登錄");
            router.push({ path: '/login' })
            return
          }
          localStorage.setItem('Token',res.data.data.access_token);
          localStorage.setItem('refresh_Token',res.data.data.refresh_token);
          localStorage.setItem("expired_at",res.data.data.expired_at);
        }).catch(err => {
          alert(err.response.data.message)
          /*清除本地保存的auth*/
          // localStorage.removeItem('auth')
          window.location.href = '#/login'
        })
      }else if(error.response.status === 500) { // 服務器斷開
      alert("服務器斷開，請稍後重試。");
    }else if(error.response.status === 403){ //無auth授權，後臺不允許訪問
      alert("不允許訪問,請與技術人員聯繫");
    }
      return response
    return Promise.reject(error)
  }
)
/*判斷token是否過期*/
function isTokenExpired() {
  let expiredTime =  new Date().getTime() / 1000;
  /*從localStorage中取出token過期時間*/
  if(localStorage.getItem("expired_at") != undefined && localStorage.getItem("expired_at") != "undefined"){
    expiredTime = new Date(localStorage.getItem("expired_at")).getTime() / 1000
  }
  /*獲取本地時間*/
  let nowTime = new Date().getTime() / 1000

  /*如果 < 10分鐘，則說明即將過期*/
  var flag = (expiredTime - nowTime) < 10*60;
  // return (expiredTime - nowTime) < 10*60;
  return flag;
}
export default service

！！！自己記錄，有好的建議或者不同看法歡迎提出。