feat: refactor and improve the request client and support refreshToken (#4157)

* feat: refreshToken * chore: store refreshToken * chore: generate token using jsonwebtoken * chore: set refreshToken in httpOnly cookie * perf: authHeader verify * chore: add add response interceptor * chore: test refresh * chore: handle logout * chore: type * chore: update pnpm-lock.yaml * chore: remove test code * chore: add todo comment * chore: update pnpm-lock.yaml * chore: remove default interceptors * chore: copy codes * chore: handle refreshToken invalid * chore: add refreshToken preference * chore: typo * chore: refresh token逻辑调整 * refactor: interceptor presets * chore: copy codes * fix: ci errors * chore: add missing await * feat: 完善refresh-token逻辑及文档 * fix: ci error * chore: filename --------- Co-authored-by: vince <vince292007@gmail.com>
2025-08-26 16:46:19 +08:00 · 2024-08-19 22:59:42 +08:00
parent f8485e8861
commit 01d60336a6
40 changed files with 1055 additions and 523 deletions
--- a/packages/effects/request/src/request-client/index.ts
+++ b/packages/effects/request/src/request-client/index.ts
@@ -1,2 +1,3 @@
+export * from './preset-interceptors';
 export * from './request-client';
 export type * from './types';
--- a/packages/effects/request/src/request-client/modules/interceptor.ts
+++ b/packages/effects/request/src/request-client/modules/interceptor.ts
@@ -1,10 +1,19 @@
-import type {
-  AxiosInstance,
-  AxiosResponse,
-  InternalAxiosRequestConfig,
-} from 'axios';
+import type { AxiosInstance, AxiosResponse } from 'axios';

-const errorHandler = (res: Error) => Promise.reject(res);
+import type {
+  RequestInterceptorConfig,
+  ResponseInterceptorConfig,
+} from '../types';
+
+const defaultRequestInterceptorConfig: RequestInterceptorConfig = {
+  fulfilled: (response) => response,
+  rejected: (error) => Promise.reject(error),
+};
+
+const defaultResponseInterceptorConfig: ResponseInterceptorConfig = {
+  fulfilled: (response: AxiosResponse) => response,
+  rejected: (error) => Promise.reject(error),
+};

 class InterceptorManager {
  private axiosInstance: AxiosInstance;
@@ -13,28 +22,18 @@ class InterceptorManager {
    this.axiosInstance = instance;
  }

-  addRequestInterceptor(
-    fulfilled: (
-      config: InternalAxiosRequestConfig,
-    ) => InternalAxiosRequestConfig | Promise<InternalAxiosRequestConfig>,
-    rejected?: (error: any) => any,
-  ) {
-    this.axiosInstance.interceptors.request.use(
-      fulfilled,
-      rejected || errorHandler,
-    );
+  addRequestInterceptor({
+    fulfilled,
+    rejected,
+  }: RequestInterceptorConfig = defaultRequestInterceptorConfig) {
+    this.axiosInstance.interceptors.request.use(fulfilled, rejected);
  }

-  addResponseInterceptor<T = any>(
-    fulfilled: (
-      response: AxiosResponse<T>,
-    ) => AxiosResponse | Promise<AxiosResponse>,
-    rejected?: (error: any) => any,
-  ) {
-    this.axiosInstance.interceptors.response.use(
-      fulfilled,
-      rejected || errorHandler,
-    );
+  addResponseInterceptor<T = any>({
+    fulfilled,
+    rejected,
+  }: ResponseInterceptorConfig<T> = defaultResponseInterceptorConfig) {
+    this.axiosInstance.interceptors.response.use(fulfilled, rejected);
  }
 }

--- a/packages/effects/request/src/request-client/preset-interceptors.ts
+++ b/packages/effects/request/src/request-client/preset-interceptors.ts
@@ -0,0 +1,124 @@
+import type { RequestClient } from './request-client';
+import type { MakeErrorMessageFn, ResponseInterceptorConfig } from './types';
+
+import { $t } from '@vben/locales';
+
+import axios from 'axios';
+
+export const authenticateResponseInterceptor = ({
+  client,
+  doReAuthenticate,
+  doRefreshToken,
+  enableRefreshToken,
+  formatToken,
+}: {
+  client: RequestClient;
+  doReAuthenticate: () => Promise<void>;
+  doRefreshToken: () => Promise<string>;
+  enableRefreshToken: boolean;
+  formatToken: (token: string) => null | string;
+}): ResponseInterceptorConfig => {
+  return {
+    rejected: async (error) => {
+      const { config, response } = error;
+      // 如果不是 401 错误，直接抛出异常
+      if (response?.status !== 401) {
+        throw error;
+      }
+      // 判断是否启用了 refreshToken 功能
+      // 如果没有启用或者已经是重试请求了，直接跳转到重新登录
+      if (!enableRefreshToken || config.__isRetryRequest) {
+        await doReAuthenticate();
+        throw error;
+      }
+      // 如果正在刷新 token，则将请求加入队列，等待刷新完成
+      if (client.isRefreshing) {
+        return new Promise((resolve) => {
+          client.refreshTokenQueue.push((newToken: string) => {
+            config.headers.Authorization = formatToken(newToken);
+            resolve(client.request(config.url, { ...config }));
+          });
+        });
+      }
+
+      // 标记开始刷新 token
+      client.isRefreshing = true;
+      // 标记当前请求为重试请求，避免无限循环
+      config.__isRetryRequest = true;
+
+      try {
+        const newToken = await doRefreshToken();
+
+        // 处理队列中的请求
+        client.refreshTokenQueue.forEach((callback) => callback(newToken));
+        // 清空队列
+        client.refreshTokenQueue = [];
+
+        return client.request(error.config.url, { ...error.config });
+      } catch (refreshError) {
+        // 如果刷新 token 失败，处理错误（如强制登出或跳转登录页面）
+        client.refreshTokenQueue.forEach((callback) => callback(''));
+        client.refreshTokenQueue = [];
+        console.error('Refresh token failed, please login again.');
+        throw refreshError;
+      } finally {
+        client.isRefreshing = false;
+      }
+    },
+  };
+};
+
+export const errorMessageResponseInterceptor = (
+  makeErrorMessage?: MakeErrorMessageFn,
+): ResponseInterceptorConfig => {
+  return {
+    rejected: (error: any) => {
+      if (axios.isCancel(error)) {
+        return Promise.reject(error);
+      }
+
+      const err: string = error?.toString?.() ?? '';
+      let errMsg = '';
+      if (err?.includes('Network Error')) {
+        errMsg = $t('fallback.http.networkError');
+      } else if (error?.message?.includes?.('timeout')) {
+        errMsg = $t('fallback.http.requestTimeout');
+      }
+      if (errMsg) {
+        makeErrorMessage?.(errMsg);
+        return Promise.reject(error);
+      }
+
+      let errorMessage = error?.response?.data?.error?.message ?? '';
+      const status = error?.response?.status;
+
+      switch (status) {
+        case 400: {
+          errorMessage = $t('fallback.http.badRequest');
+          break;
+        }
+        case 401: {
+          errorMessage = $t('fallback.http.unauthorized');
+          break;
+        }
+        case 403: {
+          errorMessage = $t('fallback.http.forbidden');
+          break;
+        }
+        case 404: {
+          errorMessage = $t('fallback.http.notFound');
+          break;
+        }
+        case 408: {
+          errorMessage = $t('fallback.http.requestTimeout');
+          break;
+        }
+        default: {
+          errorMessage = $t('fallback.http.internalServerError');
+        }
+      }
+      makeErrorMessage?.(errorMessage);
+      return Promise.reject(error);
+    },
+  };
+};
--- a/packages/effects/request/src/request-client/request-client.ts
+++ b/packages/effects/request/src/request-client/request-client.ts
@@ -3,17 +3,8 @@ import type {
  AxiosRequestConfig,
  AxiosResponse,
  CreateAxiosDefaults,
-  InternalAxiosRequestConfig,
 } from 'axios';

-import type {
-  MakeAuthorizationFn,
-  MakeErrorMessageFn,
-  MakeRequestHeadersFn,
-  RequestClientOptions,
-} from './types';
-
-import { $t } from '@vben/locales';
 import { merge } from '@vben/utils';

 import axios from 'axios';
@@ -21,16 +12,19 @@ import axios from 'axios';
 import { FileDownloader } from './modules/downloader';
 import { InterceptorManager } from './modules/interceptor';
 import { FileUploader } from './modules/uploader';
+import { type RequestClientOptions } from './types';

 class RequestClient {
-  private instance: AxiosInstance;
-  private makeAuthorization: MakeAuthorizationFn | undefined;
-  private makeErrorMessage: MakeErrorMessageFn | undefined;
-  private makeRequestHeaders: MakeRequestHeadersFn | undefined;
+  private readonly instance: AxiosInstance;

  public addRequestInterceptor: InterceptorManager['addRequestInterceptor'];
  public addResponseInterceptor: InterceptorManager['addResponseInterceptor'];
+
  public download: FileDownloader['download'];
+  // 是否正在刷新token
+  public isRefreshing = false;
+  // 刷新token队列
+  public refreshTokenQueue: ((token: string) => void)[] = [];
  public upload: FileUploader['upload'];

  /**
@@ -38,7 +32,6 @@ class RequestClient {
   * @param options - Axios请求配置，可选
   */
  constructor(options: RequestClientOptions = {}) {
-    this.bindMethods();
    // 合并默认配置和传入的配置
    const defaultConfig: CreateAxiosDefaults = {
      headers: {
@@ -47,18 +40,11 @@ class RequestClient {
      // 默认超时时间
      timeout: 10_000,
    };
-    const {
-      makeAuthorization,
-      makeErrorMessage,
-      makeRequestHeaders,
-      ...axiosConfig
-    } = options;
+    const { ...axiosConfig } = options;
    const requestConfig = merge(axiosConfig, defaultConfig);
-
    this.instance = axios.create(requestConfig);
-    this.makeAuthorization = makeAuthorization;
-    this.makeRequestHeaders = makeRequestHeaders;
-    this.makeErrorMessage = makeErrorMessage;
+
+    this.bindMethods();

    // 实例化拦截器管理器
    const interceptorManager = new InterceptorManager(this.instance);
@@ -73,9 +59,6 @@ class RequestClient {
    // 实例化文件下载器
    const fileDownloader = new FileDownloader(this);
    this.download = fileDownloader.download.bind(fileDownloader);
-
-    // 设置默认的拦截器
-    this.setupInterceptors();
  }

  private bindMethods() {
@@ -93,92 +76,6 @@ class RequestClient {
    });
  }

-  private setupDefaultResponseInterceptor() {
-    this.addRequestInterceptor(
-      (config: InternalAxiosRequestConfig) => {
-        const authorization = this.makeAuthorization?.(config);
-        if (authorization) {
-          const { token } = authorization.tokenHandler?.() ?? {};
-          config.headers[authorization.key || 'Authorization'] = token;
-        }
-
-        const requestHeader = this.makeRequestHeaders?.(config);
-
-        if (requestHeader) {
-          for (const [key, value] of Object.entries(requestHeader)) {
-            config.headers[key] = value;
-          }
-        }
-
-        return config;
-      },
-      (error: any) => Promise.reject(error),
-    );
-    this.addResponseInterceptor(
-      (response: AxiosResponse) => {
-        return response;
-      },
-      (error: any) => {
-        if (axios.isCancel(error)) {
-          return Promise.reject(error);
-        }
-
-        const err: string = error?.toString?.() ?? '';
-        let errMsg = '';
-        if (err?.includes('Network Error')) {
-          errMsg = $t('fallback.http.networkError');
-        } else if (error?.message?.includes?.('timeout')) {
-          errMsg = $t('fallback.http.requestTimeout');
-        }
-        if (errMsg) {
-          this.makeErrorMessage?.(errMsg);
-          return Promise.reject(error);
-        }
-
-        let errorMessage = error?.response?.data?.error?.message ?? '';
-        const status = error?.response?.status;
-
-        switch (status) {
-          case 400: {
-            errorMessage = $t('fallback.http.badRequest');
-            break;
-          }
-
-          case 401: {
-            errorMessage = $t('fallback.http.unauthorized');
-            this.makeAuthorization?.().unAuthorizedHandler?.();
-            break;
-          }
-          case 403: {
-            errorMessage = $t('fallback.http.forbidden');
-            break;
-          }
-          // 404请求不存在
-          case 404: {
-            errorMessage = $t('fallback.http.notFound');
-            break;
-          }
-          case 408: {
-            errorMessage = $t('fallback.http.requestTimeout');
-
-            break;
-          }
-          default: {
-            errorMessage = $t('fallback.http.internalServerError');
-          }
-        }
-
-        this.makeErrorMessage?.(errorMessage);
-        return Promise.reject(error);
-      },
-    );
-  }
-
-  private setupInterceptors() {
-    // 默认拦截器
-    this.setupDefaultResponseInterceptor();
-  }
-
  /**
   * DELETE请求方法
   */
--- a/packages/effects/request/src/request-client/types.ts
+++ b/packages/effects/request/src/request-client/types.ts
@@ -1,4 +1,8 @@
-import type { CreateAxiosDefaults, InternalAxiosRequestConfig } from 'axios';
+import type {
+  AxiosResponse,
+  CreateAxiosDefaults,
+  InternalAxiosRequestConfig,
+} from 'axios';

 type RequestContentType =
  | 'application/json;charset=utf-8'
@@ -6,42 +10,26 @@ type RequestContentType =
  | 'application/x-www-form-urlencoded;charset=utf-8'
  | 'multipart/form-data;charset=utf-8';

-interface MakeAuthorization {
-  key?: string;
-  tokenHandler: () => { refreshToken: string; token: string } | null;
-  unAuthorizedHandler?: () => Promise<void>;
+type RequestClientOptions = CreateAxiosDefaults;
+
+interface RequestInterceptorConfig {
+  fulfilled?: (
+    config: InternalAxiosRequestConfig,
+  ) =>
+    | InternalAxiosRequestConfig<any>
+    | Promise<InternalAxiosRequestConfig<any>>;
+  rejected?: (error: any) => any;
 }

-interface MakeRequestHeaders {
-  'Accept-Language'?: string;
+interface ResponseInterceptorConfig<T = any> {
+  fulfilled?: (
+    response: AxiosResponse<T>,
+  ) => AxiosResponse | Promise<AxiosResponse>;
+  rejected?: (error: any) => any;
 }

-type MakeAuthorizationFn = (
-  config?: InternalAxiosRequestConfig,
-) => MakeAuthorization;
-
-type MakeRequestHeadersFn = (
-  config?: InternalAxiosRequestConfig,
-) => MakeRequestHeaders;
-
 type MakeErrorMessageFn = (message: string) => void;

-interface RequestClientOptions extends CreateAxiosDefaults {
-  /**
-   * 用于生成Authorization
-   */
-  makeAuthorization?: MakeAuthorizationFn;
-  /**
-   * 用于生成错误消息
-   */
-  makeErrorMessage?: MakeErrorMessageFn;
-
-  /**
-   * 用于生成请求头
-   */
-  makeRequestHeaders?: MakeRequestHeadersFn;
-}
-
 interface HttpResponse<T = any> {
  /**
   * 0 表示成功 其他表示失败
@@ -54,9 +42,9 @@ interface HttpResponse<T = any> {

 export type {
  HttpResponse,
-  MakeAuthorizationFn,
  MakeErrorMessageFn,
-  MakeRequestHeadersFn,
  RequestClientOptions,
  RequestContentType,
+  RequestInterceptorConfig,
+  ResponseInterceptorConfig,
 };