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

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) => {
-    return qs.stringify(params);
-  },
+  paramsSerializer: (params) => qs.stringify(params),
 });
 
 // 请求拦截器
 service.interceptors.request.use(
   (config: InternalAxiosRequestConfig) => {
-    // 如果设置了 "no-auth"，则不携带 Authorization 头，用于登录、刷新 token 等接口
-    if (config.headers.Authorization === "no-auth") {
-      delete config.headers.Authorization;
+    const accessToken = getToken();
+    // 如果 Authorization 设置为 no-auth，则不携带 Token，用于登录、刷新 Token 等接口
+    if (config.headers.Authorization !== "no-auth" && accessToken) {
+      config.headers.Authorization = accessToken;
     } else {
-      const accessToken = getToken();
-      if (accessToken) {
-        config.headers.Authorization = accessToken;
-      }
+      delete config.headers.Authorization;
     }
     return config;
   },
-  (error: any) => {
-    return Promise.reject(error);
-  }
+  (error) => Promise.reject(error)
 );
 
 // 响应拦截器
 service.interceptors.response.use(
   (response: AxiosResponse) => {
-    const { responseType } = response.config;
-
-    // 如果响应类型是二进制数据（文件导出场景）, 则直接返回 response
-    if (responseType === "blob") {
+    // 如果响应是二进制流，则直接返回，用于下载文件、Excel 导出等
+    if (response.config.responseType === "blob") {
       return response;
     }
 
@@ -51,21 +44,15 @@ service.interceptors.response.use(
     ElMessage.error(msg || "系统出错");
     return Promise.reject(new Error(msg || "Error"));
   },
-  (error: any) => {
-    // 异常处理 非 2xx 状态码 会进入这里
-    if (error.response.data) {
-      const { code, msg } = error.response.data;
-      if (code === ResultEnum.TOKEN_INVALID) {
-        ElNotification({
-          title: "提示",
-          message: "您的会话已过期，请重新登录",
-          type: "info",
-        });
-        useUserStoreHook()
-          .clearUserData()
-          .then(() => {
-            location.reload();
-          });
+  async (error: any) => {
+    const { config, response } = error;
+    if (response) {
+      const { code, msg } = response.data;
+      if (code === ResultEnum.ACCESS_TOKEN_INVALID) {
+        // Token 过期，刷新 Token
+        return handleTokenRefresh(config);
+      } else if (code === ResultEnum.REFRESH_TOKEN_INVALID) {
+        return Promise.reject(new Error(msg || "Error"));
       } 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;
+        });
+    }
+  });
+}