feat: ✨ 新增 JWT 刷新模式，支持因访问令牌过期而失败的请求重试

src/api/auth/index.ts

@@ -65,14 +65,14 @@ export interface LoginData {
 
 /** 登录响应 */
 export interface LoginResult {
-  /** 访问token */
+  /** 访问令牌 */
-  accessToken?: string;
+  accessToken: string;
-  /** 过期时间(单位：毫秒) */
+  /** 刷新令牌 */
-  expires?: number;
+  refreshToken: string;
-  /** 刷新token */
+  /** 令牌类型 */
-  refreshToken?: string;
+  tokenType: string;
-  /** token 类型 */
+  /** 过期时间(秒) */
-  tokenType?: string;
+  expiresIn: number;
 }
 
 /** 验证码响应 */

src/enums/ResultEnum.ts

@@ -12,7 +12,12 @@ export const enum ResultEnum {
   ERROR = "B0001",
 
   /**
-   * 令牌无效或过期
+   * 访问令牌无效或过期
    */
-  TOKEN_INVALID = "A0230",
+  ACCESS_TOKEN_INVALID = "A0230",
+
+  /**
+   * 刷新令牌无效或过期
+   */
+  REFRESH_TOKEN_INVALID = "A0231",
 }

src/store/modules/user.ts

@@ -5,7 +5,7 @@ import { useDictStoreHook } from "@/store/modules/dict";
 import AuthAPI, { type LoginData } from "@/api/auth";
 import UserAPI, { type UserInfo } from "@/api/system/user";
 
-import { setToken, clearToken } from "@/utils/auth";
+import { setToken, setRefreshToken, getRefreshToken, clearToken } from "@/utils/auth";
 
 export const useUserStore = defineStore("user", () => {
   const userInfo = useStorage<UserInfo>("userInfo", {} as UserInfo);
@@ -20,8 +20,9 @@ export const useUserStore = defineStore("user", () => {
     return new Promise<void>((resolve, reject) => {
       AuthAPI.login(loginData)
         .then((data) => {
-          const { tokenType, accessToken } = data;
+          const { tokenType, accessToken, refreshToken } = data;
           setToken(tokenType + " " + accessToken); // Bearer eyJhbGciOiJIUzI1NiJ9.xxx.xxx
+          setRefreshToken(refreshToken);
           resolve();
         })
         .catch((error) => {
@@ -69,7 +70,27 @@ export const useUserStore = defineStore("user", () => {
   }
 
   /**
-   * 清理用户会话
+   * 刷新 token
+   */
+  function refreshToken() {
+    const refreshToken = getRefreshToken();
+    return new Promise<void>((resolve, reject) => {
+      AuthAPI.refreshToken(refreshToken)
+        .then((data) => {
+          const { tokenType, accessToken, refreshToken } = data;
+          setToken(tokenType + " " + accessToken);
+          setRefreshToken(refreshToken);
+          resolve();
+        })
+        .catch((error) => {
+          console.log(" refreshToken  刷新失败", error);
+          reject(error);
+        });
+    });
+  }
+
+  /**
+   * 清理用户数据
    *
    * @returns
    */
@@ -88,6 +109,7 @@ export const useUserStore = defineStore("user", () => {
     login,
     logout,
     clearUserData,
+    refreshToken,
   };
 });
 

src/utils/auth.ts

@@ -1,15 +1,27 @@
-const TOKEN_KEY = "admin-token";
+// 访问 token 缓存的 key
+const ACCESS_TOKEN_KEY = "access_token";
+// 刷新 token 缓存的 key
+const REFRESH_TOKEN_KEY = "refresh_token";
 
 function getToken(): string {
-  return localStorage.getItem(TOKEN_KEY) || "";
+  return localStorage.getItem(ACCESS_TOKEN_KEY) || "";
 }
 
 function setToken(token: string) {
-  return localStorage.setItem(TOKEN_KEY, token);
+  localStorage.setItem(ACCESS_TOKEN_KEY, token);
+}
+
+function getRefreshToken(): string {
+  return localStorage.getItem(REFRESH_TOKEN_KEY) || "";
+}
+
+function setRefreshToken(token: string) {
+  localStorage.setItem(REFRESH_TOKEN_KEY, token);
 }
 
 function clearToken() {
-  return localStorage.removeItem(TOKEN_KEY);
+  localStorage.removeItem(ACCESS_TOKEN_KEY);
+  localStorage.removeItem(REFRESH_TOKEN_KEY);
 }
 
-export { getToken, setToken, clearToken };
+export { getToken, setToken, clearToken, getRefreshToken, setRefreshToken };

src/utils/request.ts

@@ -3,43 +3,36 @@ import qs from "qs";
 import { useUserStoreHook } from "@/store/modules/user";
 import { ResultEnum } from "@/enums/ResultEnum";
 import { getToken } from "@/utils/auth";
+import router from "@/router";
 
 // 创建 axios 实例
 const service = axios.create({
   baseURL: import.meta.env.VITE_APP_BASE_API,
   timeout: 50000,
   headers: { "Content-Type": "application/json;charset=utf-8" },
-  paramsSerializer: (params) => {
+  paramsSerializer: (params) => qs.stringify(params),
-    return qs.stringify(params);
-  },
 });
 
 // 请求拦截器
 service.interceptors.request.use(
   (config: InternalAxiosRequestConfig) => {
-    // 如果设置了 "no-auth"，则不携带 Authorization 头，用于登录、刷新 token 等接口
-    if (config.headers.Authorization === "no-auth") {
-      delete config.headers.Authorization;
-    } else {
     const accessToken = getToken();
-      if (accessToken) {
+    // 如果 Authorization 设置为 no-auth，则不携带 Token，用于登录、刷新 Token 等接口
+    if (config.headers.Authorization !== "no-auth" && accessToken) {
       config.headers.Authorization = accessToken;
-      }
+    } else {
+      delete config.headers.Authorization;
     }
     return config;
   },
-  (error: any) => {
+  (error) => Promise.reject(error)
-    return Promise.reject(error);
-  }
 );
 
 // 响应拦截器
 service.interceptors.response.use(
   (response: AxiosResponse) => {
-    const { responseType } = response.config;
+    // 如果响应是二进制流，则直接返回，用于下载文件、Excel 导出等
-
+    if (response.config.responseType === "blob") {
-    // 如果响应类型是二进制数据（文件导出场景）, 则直接返回 response
-    if (responseType === "blob") {
       return response;
     }
 
@@ -51,21 +44,15 @@ service.interceptors.response.use(
     ElMessage.error(msg || "系统出错");
     return Promise.reject(new Error(msg || "Error"));
   },
-  (error: any) => {
+  async (error: any) => {
-    // 异常处理 非 2xx 状态码 会进入这里
+    const { config, response } = error;
-    if (error.response.data) {
+    if (response) {
-      const { code, msg } = error.response.data;
+      const { code, msg } = response.data;
-      if (code === ResultEnum.TOKEN_INVALID) {
+      if (code === ResultEnum.ACCESS_TOKEN_INVALID) {
-        ElNotification({
+        // Token 过期，刷新 Token
-          title: "提示",
+        return handleTokenRefresh(config);
-          message: "您的会话已过期，请重新登录",
+      } else if (code === ResultEnum.REFRESH_TOKEN_INVALID) {
-          type: "info",
+        return Promise.reject(new Error(msg || "Error"));
-        });
-        useUserStoreHook()
-          .clearUserData()
-          .then(() => {
-            location.reload();
-          });
       } else {
         ElMessage.error(msg || "系统出错");
       }
@@ -75,3 +62,50 @@ service.interceptors.response.use(
 );
 
 export default service;
+
+// 刷新 Token 的锁
+let isRefreshing = false;
+// 因 Token 过期导致失败的请求队列
+let requestsQueue: Array<() => void> = [];
+
+// 刷新 Token 处理
+async function handleTokenRefresh(config: InternalAxiosRequestConfig) {
+  return new Promise((resolve) => {
+    const requestCallback = () => {
+      config.headers.Authorization = getToken();
+      resolve(service(config));
+    };
+
+    requestsQueue.push(requestCallback);
+
+    if (!isRefreshing) {
+      isRefreshing = true;
+
+      // 刷新 Token
+      useUserStoreHook()
+        .refreshToken()
+        .then(() => {
+          // Token 刷新成功，执行请求队列
+          requestsQueue.forEach((callback) => callback());
+          requestsQueue = [];
+        })
+        .catch((error) => {
+          console.log("handleTokenRefresh error", error);
+          // Token 刷新失败，清除用户数据并跳转到登录
+          ElNotification({
+            title: "提示",
+            message: "您的会话已过期，请重新登录",
+            type: "info",
+          });
+          useUserStoreHook()
+            .clearUserData()
+            .then(() => {
+              router.push("/login");
+            });
+        })
+        .finally(() => {
+          isRefreshing = false;
+        });
+    }
+  });
+}