refactor: 优化请求拦截器逻辑
This commit is contained in:
@@ -5,10 +5,10 @@ import { useUserStoreHook } from "@/store/modules/user";
|
|||||||
import { usePermissionStoreHook } from "@/store/modules/permission";
|
import { usePermissionStoreHook } from "@/store/modules/permission";
|
||||||
import { AuthStorage, redirectToLogin } from "@/utils/auth";
|
import { AuthStorage, redirectToLogin } from "@/utils/auth";
|
||||||
|
|
||||||
// ============================================
|
// 记录已重试的请求,防止无限循环
|
||||||
// HTTP 请求实例
|
const retriedConfigs = new WeakSet<InternalAxiosRequestConfig>();
|
||||||
// ============================================
|
|
||||||
|
|
||||||
|
// HTTP 请求实例
|
||||||
const http = axios.create({
|
const http = axios.create({
|
||||||
baseURL: import.meta.env.VITE_APP_BASE_API,
|
baseURL: import.meta.env.VITE_APP_BASE_API,
|
||||||
timeout: 50000,
|
timeout: 50000,
|
||||||
@@ -16,10 +16,7 @@ const http = axios.create({
|
|||||||
paramsSerializer: (params) => qs.stringify(params, { arrayFormat: "repeat" }),
|
paramsSerializer: (params) => qs.stringify(params, { arrayFormat: "repeat" }),
|
||||||
});
|
});
|
||||||
|
|
||||||
// ============================================
|
|
||||||
// 请求拦截器
|
// 请求拦截器
|
||||||
// ============================================
|
|
||||||
|
|
||||||
http.interceptors.request.use(
|
http.interceptors.request.use(
|
||||||
(config: InternalAxiosRequestConfig) => {
|
(config: InternalAxiosRequestConfig) => {
|
||||||
const token = AuthStorage.getAccessToken();
|
const token = AuthStorage.getAccessToken();
|
||||||
@@ -35,14 +32,12 @@ http.interceptors.request.use(
|
|||||||
(error) => Promise.reject(error)
|
(error) => Promise.reject(error)
|
||||||
);
|
);
|
||||||
|
|
||||||
// ============================================
|
|
||||||
// 响应拦截器
|
// 响应拦截器
|
||||||
// ============================================
|
|
||||||
|
|
||||||
http.interceptors.response.use(
|
http.interceptors.response.use(
|
||||||
(response: AxiosResponse<ApiResponse>) => {
|
(response: AxiosResponse<ApiResponse>) => {
|
||||||
// 二进制数据直接返回
|
|
||||||
const { responseType } = response.config;
|
const { responseType } = response.config;
|
||||||
|
|
||||||
|
// 二进制数据直接返回
|
||||||
if (responseType === "blob" || responseType === "arraybuffer") {
|
if (responseType === "blob" || responseType === "arraybuffer") {
|
||||||
return response;
|
return response;
|
||||||
}
|
}
|
||||||
@@ -52,7 +47,9 @@ http.interceptors.response.use(
|
|||||||
if (code === ApiCodeEnum.SUCCESS) {
|
if (code === ApiCodeEnum.SUCCESS) {
|
||||||
return data;
|
return data;
|
||||||
}
|
}
|
||||||
return rejectWithMessage(msg, "系统出错");
|
|
||||||
|
ElMessage.error(msg || "系统出错");
|
||||||
|
return Promise.reject(new Error(msg || "系统出错"));
|
||||||
},
|
},
|
||||||
|
|
||||||
async (error) => {
|
async (error) => {
|
||||||
@@ -67,7 +64,29 @@ http.interceptors.response.use(
|
|||||||
|
|
||||||
// Token 过期:尝试刷新 token 后自动重试一次
|
// Token 过期:尝试刷新 token 后自动重试一次
|
||||||
if (code === ApiCodeEnum.ACCESS_TOKEN_INVALID) {
|
if (code === ApiCodeEnum.ACCESS_TOKEN_INVALID) {
|
||||||
return retryWithRefresh(config);
|
// 已重试过,直接跳登录
|
||||||
|
if (retriedConfigs.has(config)) {
|
||||||
|
await redirectToLogin("登录已过期,请重新登录");
|
||||||
|
return Promise.reject(new Error("Token Invalid"));
|
||||||
|
}
|
||||||
|
|
||||||
|
retriedConfigs.add(config);
|
||||||
|
|
||||||
|
try {
|
||||||
|
const userStore = useUserStoreHook();
|
||||||
|
await userStore.refreshTokenOnce();
|
||||||
|
|
||||||
|
const token = AuthStorage.getAccessToken();
|
||||||
|
if (token) {
|
||||||
|
config.headers = config.headers || ({} as any);
|
||||||
|
(config.headers as any).Authorization = `Bearer ${token}`;
|
||||||
|
}
|
||||||
|
|
||||||
|
return http(config);
|
||||||
|
} catch {
|
||||||
|
await redirectToLogin("登录已过期,请重新登录");
|
||||||
|
return Promise.reject(new Error("Token refresh failed"));
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// Refresh token 失效:无法续期,跳转登录
|
// Refresh token 失效:无法续期,跳转登录
|
||||||
@@ -76,67 +95,17 @@ http.interceptors.response.use(
|
|||||||
return Promise.reject(new Error(msg || "Token Invalid"));
|
return Promise.reject(new Error(msg || "Token Invalid"));
|
||||||
}
|
}
|
||||||
|
|
||||||
// 权限不足:刷新权限快照(用户信息 + 动态路由)后提示
|
// 权限不足:刷新权限快照后提示
|
||||||
if (code === ApiCodeEnum.PERMISSION_DENIED) {
|
if (code === ApiCodeEnum.PERMISSION_DENIED) {
|
||||||
return handlePermissionDenied(msg);
|
const permissionStore = usePermissionStoreHook();
|
||||||
|
await permissionStore.reloadPermissionSnapshotOnce();
|
||||||
|
ElMessage.error(msg || "权限不足");
|
||||||
|
return Promise.reject(new Error(msg || "权限不足"));
|
||||||
}
|
}
|
||||||
|
|
||||||
return rejectWithMessage(msg, "请求失败");
|
ElMessage.error(msg || "请求失败");
|
||||||
|
return Promise.reject(new Error(msg || "请求失败"));
|
||||||
}
|
}
|
||||||
);
|
);
|
||||||
|
|
||||||
/**
|
|
||||||
* 权限不足处理:刷新权限快照(用户信息 + 动态路由),并给出提示
|
|
||||||
*
|
|
||||||
* 刷新完成后仍然按失败处理,交由调用方的错误流处理
|
|
||||||
*/
|
|
||||||
async function handlePermissionDenied(msg?: string): Promise<never> {
|
|
||||||
const permissionStore = usePermissionStoreHook();
|
|
||||||
await permissionStore.reloadPermissionSnapshotOnce();
|
|
||||||
return rejectWithMessage(msg, "权限不足");
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* access token 过期后的自动续期与重试
|
|
||||||
*
|
|
||||||
* - 刷新 token 走单飞(userStore.refreshTokenOnce)
|
|
||||||
* - 当前请求最多重试一次(__isTokenRetry 标记)
|
|
||||||
*/
|
|
||||||
async function retryWithRefresh(config: InternalAxiosRequestConfig): Promise<unknown> {
|
|
||||||
const retryConfig = config as InternalAxiosRequestConfig & { __isTokenRetry?: boolean };
|
|
||||||
if (retryConfig.__isTokenRetry) {
|
|
||||||
await redirectToLogin("登录已过期,请重新登录");
|
|
||||||
return Promise.reject(new Error("Token Invalid"));
|
|
||||||
}
|
|
||||||
retryConfig.__isTokenRetry = true;
|
|
||||||
|
|
||||||
try {
|
|
||||||
const userStore = useUserStoreHook();
|
|
||||||
await userStore.refreshTokenOnce();
|
|
||||||
|
|
||||||
const token = AuthStorage.getAccessToken();
|
|
||||||
if (token) {
|
|
||||||
retryConfig.headers = retryConfig.headers || ({} as any);
|
|
||||||
(retryConfig.headers as any).Authorization = `Bearer ${token}`;
|
|
||||||
}
|
|
||||||
|
|
||||||
return http(retryConfig);
|
|
||||||
} catch {
|
|
||||||
await redirectToLogin("登录已过期,请重新登录");
|
|
||||||
return Promise.reject(new Error("Token refresh failed"));
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 统一处理业务错误提示并拒绝 Promise
|
|
||||||
*
|
|
||||||
* @param msg 错误消息内容
|
|
||||||
* @param fallback 默认兜底消息
|
|
||||||
*/
|
|
||||||
function rejectWithMessage(msg: string | undefined, fallback: string): Promise<never> {
|
|
||||||
const message = msg || fallback;
|
|
||||||
ElMessage.error(message);
|
|
||||||
return Promise.reject(new Error(message));
|
|
||||||
}
|
|
||||||
|
|
||||||
export default http;
|
export default http;
|
||||||
|
|||||||
Reference in New Issue
Block a user