vue攔截器如何增加token參數(shù)

更新時間：2024年08月30日 15:46:19 作者：石意

這篇文章主要介紹了vue攔截器如何增加token參數(shù)問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教

vue攔截器增加token參數(shù)

使用請求攔截器，攔截vue所有請求，增加token參數(shù)

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

注意

如果一個賬號允許多人登錄使用，上述方法沒有問題

但是如果一個賬號只允許一人登錄，一個地點(diǎn)登錄，那上述方法就不那么全面

這時候可以采用使用響應(yīng)攔截器，攔截狀態(tài)碼進(jìn)行對應(yīng)的異常處理

然后判斷哪些是token失效，再進(jìn)行對應(yīng)的登出操作或者是重新獲取token

完整代碼

import axios from 'axios'
import { getToken } from '@/utils/auth'
import { getToken_refresh } from '@/api/users'
import router from '../router/index';
 
// 創(chuàng)建axios實(shí)例
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
/*被掛起的請求數(shù)組*/
let refreshSubscribers = []
 
/*獲取刷新token請求的token*/
function getRefreshToken () {
  return localStorage.getItem("refresh_token")
}
 
/*push所有請求到數(shù)組中*/
function subscribeTokenRefresh (cb) {
  refreshSubscribers.push(cb)
}
 
/*刷新請求（refreshSubscribers數(shù)組中的請求得到新的token之后會自執(zhí)行，用新的token去請求數(shù)據(jù)）*/
function onRrefreshed (token) {
  refreshSubscribers.map(cb => cb(token))
}
 
// request 請求攔截器
service.interceptors.request.use(config => {
  if (getToken()) {
    config.params['access_token'] = getToken() // 讓每個請求攜帶自定義token 請根據(jù)實(shí)際情況自行修改
    /*判斷token是否將要過期*/
    var istoken = isTokenExpired();
    if (istoken) {
      /*判斷是否正在刷新*/
      if (!window.isRefreshing) {
        /*將刷新token的標(biāo)志置為true*/
        window.isRefreshing = true
        /*發(fā)起刷新token的請求*/
        var params = {
          refresh_token: localStorage.getItem('refresh_Token'),
        };
        getToken_refresh(params).then((res) => {
          /*將標(biāo)志置為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()
          /*執(zhí)行數(shù)組里的函數(shù),重新發(fā)起被掛起的請求*/
          onRrefreshed(res.data.data.access_token)
          /*執(zhí)行onRefreshed函數(shù)后清空數(shù)組中保存的請求*/
          refreshSubscribers = []
        }).catch(err => {
          alert(err.response.data.message)
          /*清除本地保存的auth*/
          // localStorage.removeItem('auth')
          window.location.href = '#/login'
        })
      }
      /*把請求(token)=>{....}都push到一個數(shù)組中*/
      let retry = new Promise((resolve, reject) => {
        /*(token) => {...}這個函數(shù)就是回調(diào)函數(shù)*/
        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 響應(yīng)攔截器
service.interceptors.response.use(
  response => {
    // console.log(response)
    if (response.status !== 200) {
      if(response.status === 500) { // 服務(wù)器斷開
        this.$message({
          showClose: true,
          message: '服務(wù)器斷開，請稍后重試。',
          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) { // 服務(wù)器斷開
      alert("服務(wù)器斷開，請稍后重試。");
    }else if(error.response.status === 403){ //無auth授權(quán)，后臺不允許訪問
      alert("不允許訪問,請與技術(shù)人員聯(lián)系");
    }
      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