快捷導(dǎo)航

VUE中攔截請(qǐng)求并無(wú)感知刷新token方式

更新時(shí)間：2024年08月30日 15:51:53 作者：阿澤Kze_

這篇文章主要介紹了VUE中攔截請(qǐng)求并無(wú)感知刷新token方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教

VUE攔截請(qǐng)求并無(wú)感知刷新token

應(yīng)用場(chǎng)景

前端登錄后，后端返回token和token失效時(shí)間，當(dāng)達(dá)到特定條件（本文以距離token過(guò)期兩小時(shí)為例），前端需要主動(dòng)請(qǐng)求token刷新接口去獲取一個(gè)新的token，做到用戶無(wú)感知地去刷新token。

思路

攔截請(qǐng)求判斷是否達(dá)到需要刷新token的條件，符合條件則刷新token并將請(qǐng)求存入一個(gè)重試隊(duì)列中，當(dāng)token刷新后，執(zhí)行重試隊(duì)列中的函數(shù)，達(dá)到刷新token的效果，

需要注意的是，當(dāng)多個(gè)請(qǐng)求幾乎同時(shí)進(jìn)來(lái)時(shí)，為了避免多次執(zhí)行token刷新，需要定義一個(gè)變量（本文變量名為isRefreshing ）進(jìn)行標(biāo)記。

import axios from "axios";
import store from "@/store";
import md5 from "js-md5";
import {
  setToken,
  getToken,
  setUid,
  setExpireTime,
  getExpireTime
} from "@/utils/auth";

// 創(chuàng)建axios實(shí)例
const service = axios.create({
  // axios中請(qǐng)求配置有baseURL選項(xiàng)，表示請(qǐng)求URL公共部分
  baseURL: window.location.protocol + process.env.VUE_APP_BASE_API,
  // 超時(shí)
  timeout: 10000
});

// 是否正在刷新的標(biāo)記
let isRefreshing = false;

// 重試隊(duì)列，每一項(xiàng)將是一個(gè)待執(zhí)行的函數(shù)形式
let requests = [];

// 判斷是否距離過(guò)期2個(gè)小時(shí)
function isRefreshTokenExpired() {
  const expire_time = getExpireTime(); // 到期時(shí)間
  const new_time = new Date().getTime(); // 當(dāng)前時(shí)間
  const stamp = expire_time - new_time; // 距離到期時(shí)間
  return stamp <= 2 * 60 * 60 * 1000 ? true : false; // 2小時(shí)
}

// request攔截器
service.interceptors.request.use(
  config => {
    const tokenObj = getToken();
    if (config.data.method === "xxxx") { //當(dāng)請(qǐng)求的接口為token刷新接口時(shí)
      return config;
    }
    if (tokenObj && isRefreshTokenExpired()) {
      // 立即刷新token
      if (!isRefreshing) {
        isRefreshing = true;
        // 請(qǐng)求token刷新接口
        store
          .dispatch("RefeshToken")
          .then(res => {
            const token = res.data.token;
            const time = res.data.expire_time.replace(/-/g, "/");
            const expire_time = new Date(time);
            setToken(token, expire_time);
            setExpireTime(new Date(res.data.expire_time).getTime(), expire_time);
            setUid(res.data.uid, expire_time);
            isRefreshing = false;
            return token;
          })
          .then(token => {
            requests.forEach(cb => cb(token));
            // 執(zhí)行完成后，清空隊(duì)列
            requests = [];
          })
          .catch(res => {
            console.error("refresh token error: ", res);
          });
      }
      const retryOriginalRequest = new Promise(resolve => {
        requests.push(token => {
          // 因?yàn)閏onfig中的token是舊的，所以刷新token后要將新token傳進(jìn)來(lái)
          config.headers["ContentToken"] = token;
          resolve(config);
        });
      });
      return retryOriginalRequest;
    }
    return config;
  },
  error => {
    Promise.reject(error);
  }
);

// 響應(yīng)攔截器
service.interceptors.response.use(
  res => {
    if (res.status === 200) {
    	return res
    }
  },
  error => {
   	console.log('catch', error)
  	return Promise.reject(error)
  }
);

export default service;