在线午夜精品自拍小视频_无码av无码专区线_亚洲无码精品人妻_人人澡欧美一区

關(guān)于JWT無(wú)感刷新TOKEN方案（結(jié)合axios）
業(yè)務(wù)需求
在用戶登錄應(yīng)用后，服務(wù)器會(huì)返回一組數(shù)據(jù)，其中就包含了accessToken和refreshToken，每個(gè)accessToken都有一個(gè)固定的有效期，如果攜帶一個(gè)過期的token向服務(wù)器請(qǐng)求時(shí)，服務(wù)器會(huì)返回401的狀態(tài)碼來(lái)告訴用戶此token過期了，此時(shí)就需要用到登錄時(shí)返回的refreshToken調(diào)用刷新Token的接口（Refresh）來(lái)更新下新的token再發(fā)送請(qǐng)求即可。

話不多說，先上代碼
工具
axios作為最熱門的http請(qǐng)求庫(kù)之一，我們本篇文章就借助它的錯(cuò)誤響應(yīng)攔截器來(lái)實(shí)現(xiàn)token無(wú)感刷新功能。

具體實(shí)現(xiàn)
本次基于axios-bz[1]代碼片段封裝響應(yīng)攔截器 可直接配置到你的項(xiàng)目中使用 ?? ??

利用interceptors.response，在業(yè)務(wù)代碼獲取到接口數(shù)據(jù)之前進(jìn)行狀態(tài)碼401判斷當(dāng)前攜帶的accessToken是否失效。下面是關(guān)于interceptors.response中異常階段處理內(nèi)容。當(dāng)響應(yīng)碼為401時(shí)，響應(yīng)攔截器會(huì)走中第二個(gè)回調(diào)函數(shù)onRejected

下面代碼分段可能會(huì)讓大家閱讀起來(lái)不是很順暢，我直接把整份代碼貼在下面，且每一段代碼之間都添加了對(duì)應(yīng)的注釋

// 最大重發(fā)次數(shù)
const MAX_ERROR_COUNT = 5;
// 當(dāng)前重發(fā)次數(shù)
let currentCount = 0;
// 緩存請(qǐng)求隊(duì)列
const queue: ((t: string) => any)[] = [];
// 當(dāng)前是否刷新狀態(tài)
let isRefresh = false;

export default async (error: AxiosError<ResponseDataType>) => {
  const statusCode = error.response?.status;
  const clearAuth = () => {
    console.log('身份過期，請(qǐng)重新登錄');
    window.location.replace('/login');
    // 清空數(shù)據(jù)
    sessionStorage.clear();
    return Promise.reject(error);
  };
  // 為了節(jié)省多余的代碼，這里僅展示處理狀態(tài)碼為401的情況
  if (statusCode === 401) {
    // accessToken失效
    // 判斷本地是否有緩存有refreshToken
    const refreshToken = sessionStorage.get('refresh') ?? null;
    if (!refreshToken) {
      clearAuth();
    }
    // 提取請(qǐng)求的配置
    const { config } = error;
    // 判斷是否refresh失敗且狀態(tài)碼401，再次進(jìn)入錯(cuò)誤攔截器
    if (config.url?.includes('refresh')) {
    clearAuth();
    }
    // 判斷當(dāng)前是否為刷新狀態(tài)中（防止多個(gè)請(qǐng)求導(dǎo)致多次調(diào)refresh接口）
    if (!isRefresh) {
      // 設(shè)置當(dāng)前狀態(tài)為刷新中
      isRefresh = true;
      // 如果重發(fā)次數(shù)超過，直接退出登錄
      if (currentCount > MAX_ERROR_COUNT) {
        clearAuth();
      }
      // 增加重試次數(shù)
      currentCount += 1;

      try {
        const {
          data: { access },
        } = await UserAuthApi.refreshToken(refreshToken);
        // 請(qǐng)求成功，緩存新的accessToken
        sessionStorage.set('token', access);
        // 重置重發(fā)次數(shù)
        currentCount = 0;
        // 遍歷隊(duì)列，重新發(fā)起請(qǐng)求
        queue.forEach((cb) => cb(access));
        // 返回請(qǐng)求數(shù)據(jù)
        return ApiInstance.request(error.config);
      } catch {
        // 刷新token失敗，直接退出登錄
        console.log('請(qǐng)重新登錄');
        sessionStorage.clear();
        window.location.replace('/login');
        return Promise.reject(error);
      } finally {
        // 重置狀態(tài)
        isRefresh = false;
      }
    } else {
      // 當(dāng)前正在嘗試刷新token，先返回一個(gè)promise阻塞請(qǐng)求并推進(jìn)請(qǐng)求列表中
      return new Promise((resolve) => {
        // 緩存網(wǎng)絡(luò)請(qǐng)求，等token刷新后直接執(zhí)行
        queue.push((newToken: string) => {
          Reflect.set(config.headers!, 'authorization', newToken);
          // @ts-ignore
          resolve(ApiInstance.request<ResponseDataType<any>>(config));
        });
      });
    }
  }

  return Promise.reject(error);
};
抽離代碼
把上面關(guān)于調(diào)用刷新token的代碼抽離成一個(gè)refreshToken函數(shù)，單獨(dú)處理這一情況，這樣子做有利于提高代碼的可讀性和維護(hù)性，且讓看上去代碼不是很臃腫

// refreshToken.ts
export default async function refreshToken(error: AxiosError<ResponseDataType>) {
    /*
    將上面 if (statusCode === 401) 中的代碼貼進(jìn)來(lái)即可，這里就不重復(fù)啦
    代碼倉(cāng)庫(kù)地址: https://github.com/QC2168/axios-bz/blob/main/Interceptors/hooks/refreshToken.ts
    */
}
經(jīng)過上面的邏輯抽離，現(xiàn)在看下攔截器中的代碼就很簡(jiǎn)潔了，后續(xù)如果要調(diào)整相關(guān)邏輯直接在refreshToken.ts文件中調(diào)整即可。

import refreshToken from './refreshToken.ts'
export default async (error: AxiosError<ResponseDataType>) => {
  const statusCode = error.response?.status;

  // 為了節(jié)省多余的代碼，這里僅展示處理狀態(tài)碼為401的情況
  if (statusCode === 401) {
    refreshToken()
  }

  return Promise.reject(error);
};
作者：_island https://juejin.cn/post/7170278285274775560

參考資料
[1]
axios-bz: https://github.com/QC2168/axios-bz




作者：_island

歡迎關(guān)注微信公眾號(hào) ：前端開發(fā)愛好者

添加好友備注【進(jìn)階學(xué)習(xí)】拉你進(jìn)技術(shù)交流群