YD_Event.Web/src/utils/http.ts

// api/axios.ts
import axios from 'axios';
import type { AxiosInstance, AxiosRequestConfig, AxiosResponse, InternalAxiosRequestConfig } from 'axios';
import { ElMessage } from 'element-plus';
import { Session } from './storage';

// token 键定义
export const accessTokenKey = 'access-token';
export const refreshAccessTokenKey = `x-${accessTokenKey}`;

// 清除 token
export const clearAccessTokens = () => {
	Session.remove(accessTokenKey);
	Session.remove(refreshAccessTokenKey);
};

// Token刷新状态和请求队列
let isRefreshing = false;
let requestQueue: Array<(token: string) => void> = [];

/**
 * 检查并存储授权信息
 * @param res 响应对象
 */
export function checkAndStoreAuthentication(res: any): void {
	// 读取响应报文头 token 信息
	const accessToken = res.headers[accessTokenKey];
	const refreshAccessToken = res.headers[refreshAccessTokenKey];

	// 判断是否是无效 token
	if (accessToken === 'invalid_token') {
		clearAccessTokens();
	}
	// 判断是否存在刷新 token，如果存在则存储在本地
	else if (refreshAccessToken && accessToken && accessToken !== 'invalid_token') {
		Session.set(accessTokenKey, accessToken);
		Session.set(refreshAccessTokenKey, refreshAccessToken);
	}
}

/**
 * 解密 JWT token 的信息
 * @param token jwt token 字符串
 * @returns <any>object
 */
export function decryptJWT(token: string): any {
	token = token.replace(/_/g, '/').replace(/-/g, '+');
	const json = decodeURIComponent(escape(window.atob(token.split('.')[1])));
	return JSON.parse(json);
}

/**
 * 将 JWT 时间戳转换成 Date
 * @description 主要针对 `exp`，`iat`，`nbf`
 * @param timestamp 时间戳
 * @returns Date 对象
 */
export function getJWTDate(timestamp: number): Date {
	return new Date(timestamp * 1000);
}

class Axios {
	// axios 实例
	readonly instance: AxiosInstance;

	// 基础配置，url和超时时间
	baseConfig: AxiosRequestConfig = { baseURL: import.meta.env.VITE_API_URL, headers: { 'Content-Type': 'application/json' }, timeout: 30000 };
	constructor(config?: AxiosRequestConfig) {
		// 使用axios.create创建axios实例
		this.instance = axios.create(Object.assign(this.baseConfig, config));

		this.instance.interceptors.request.use(
			(config: InternalAxiosRequestConfig) => {
				const accessToken = Session.get<string>(accessTokenKey);
				if (accessToken) {
					// 将 token 添加到请求报文头中
					config.headers!['Authorization'] = `Bearer ${accessToken}`;

					// 判断 accessToken 是否过期
					const jwt: any = decryptJWT(accessToken);
					const exp = getJWTDate(jwt.exp as number);
					//token已过期
					if (new Date() >= exp) {
						// 获取刷新 token
						const refreshAccessToken = Session.get<string>(refreshAccessTokenKey);
						// 携带刷新 token
						if (refreshAccessToken) {
							config.headers!['X-Authorization'] = `Bearer ${refreshAccessToken}`;
						}
					}
				}

				return config;
			},
			(err: any) => {
				return Promise.reject(err);
			}
		);

		this.instance.interceptors.response.use(
			async (res: AxiosResponse) => {
				// 检查并存储授权信息
				checkAndStoreAuthentication(res);
				
				// 如果正在刷新Token，且响应中包含新Token，说明刷新成功
				if (isRefreshing && res.headers[accessTokenKey]) {
					const newToken = res.headers[accessTokenKey];
					isRefreshing = false;
					requestQueue.forEach((callback) => callback(newToken));
					requestQueue = [];
				}
				
				const data = res.data;
				if (res.config.url?.toLocaleLowerCase() === '/file/upload'.toLowerCase()) {
					return data;
				}

				// code为200 或 返回的是文件流 直接返回
				if (data.statusCode === 200 || res.config.responseType === 'blob') {
					return data;
				}
				let message = '';
				switch (data.statusCode) {
					case 401:
						clearAccessTokens();
						message = '您已登出，请重新登录';
						break;
					case 403:
						message = '您没有权限，无法执行此项操作！';
						break;
					default:
						message = JSON.stringify(data.errors);
						break;
				}
				ElMessage({
					showClose: true,
					message: `${message}`,
					type: 'error',
				});
				if (data.statusCode === 401) {
					clearAccessTokens();
					isRefreshing = false;
					requestQueue = [];
					window.location.href = '/'; // 去登录页
				}
				return Promise.reject(new Error(data.errors || 'Error'));
			},
			async (err: any) => {
				const originalRequest = err.config;
				
				// 如果是401错误且不是重试请求
				if (err.response && err.response.status === 401 && !originalRequest._retry) {
					// 如果已经在刷新Token，将请求加入队列
					if (isRefreshing) {
						return new Promise((resolve) => {
							requestQueue.push((newToken: string) => {
								originalRequest.headers['Authorization'] = `Bearer ${newToken}`;
								resolve(this.instance(originalRequest));
							});
						});
					}
					
					// 开始刷新Token
					originalRequest._retry = true;
					isRefreshing = true;
					
					// 检查是否有刷新Token
					const refreshAccessToken = Session.get<string>(refreshAccessTokenKey);
					if (!refreshAccessToken) {
						clearAccessTokens();
						isRefreshing = false;
						window.location.href = '/';
						return Promise.reject(err);
					}
					
					try {
						// 重新发送原请求，Furion会自动处理Token刷新
						originalRequest.headers['X-Authorization'] = `Bearer ${refreshAccessToken}`;
						return this.instance(originalRequest);
					} catch (refreshErr) {
						// 刷新失败，清除所有Token并跳转登录页
						clearAccessTokens();
						isRefreshing = false;
						requestQueue = [];
						window.location.href = '/';
						return Promise.reject(refreshErr);
					}
				}
				
				// 这里用来处理http常见错误，进行全局提示
				let message = err.message;
				if (err.response && err.response.status) {
					switch (err.response.status) {
						case 400:
							message = '请求错误(400)';
							break;
						case 401:
							message = '未授权，请重新登录(401)';
							clearAccessTokens();
							window.location.href = '/';
							break;
						case 403:
							message = '拒绝访问(403)';
							break;
						case 404:
							message = '请求出错(404)';
							break;
						case 408:
							message = '请求超时(408)';
							break;
						case 500:
							message = '服务器错误(500)';
							break;
						case 501:
							message = '服务未实现(501)';
							break;
						case 502:
							message = '网络错误(502)';
							break;
						case 503:
							message = '服务不可用(503)';
							break;
						case 504:
							message = '网络超时(504)';
							break;
						case 505:
							message = 'HTTP版本不受支持(505)';
							break;
						default:
							message = `连接出错(${err.response.status})!`;
					}
				}
				// 这里错误消息可以使用全局弹框展示出来
				if (message) {
					ElMessage({
						showClose: true,
						message: `${message}，请检查网络或联系管理员！`,
						type: 'error',
					});
				}

				// 这里是AxiosError类型，所以一般我们只reject我们需要的响应即可
				return Promise.reject(err);
			}
		);
	}

	/**
	 * get请求
	 * @param url 请求地址
	 * @param config 配置参数
	 * @returns
	 */
	get = <T = any>(url: string, config?: AxiosRequestConfig): Promise<ApiResult<T>> => {
		console.log('get', url, config);
		return this.instance.get(url, config);
	};

	/**
	 * post请求
	 * @param url 请求地址
	 * @param data 请求数据
	 * @param config 配置参数
	 * @returns
	 */
	post = <T = any>(url: string, data?: any, config?: AxiosRequestConfig): Promise<ApiResult<T>> => {
		return this.instance.post(url, data, config);
	};

	/**
	 * put请求
	 * @param url 请求地址
	 * @param data 请求数据
	 * @param config 配置参数
	 * @returns
	 */
	put = <T = any>(url: string, data?: any, config?: AxiosRequestConfig): Promise<ApiResult<T>> => {
		return this.instance.put(url, data, config);
	};

	/**
	 * patch请求
	 * @param url 请求地址
	 * @param data 请求数据
	 * @param config 配置参数
	 * @returns
	 */
	patch = <T = any>(url: string, data?: any, config?: AxiosRequestConfig): Promise<ApiResult<T>> => {
		return this.instance.patch(url, data, config);
	};

	/**
	 * delete请求
	 * @param url 请求地址
	 * @param config 配置参数
	 * @returns
	 */
	delete = <T = any>(url: string, config?: AxiosRequestConfig): Promise<ApiResult<T>> => {
		return this.instance.delete(url, config);
	};

	/**
	 * 上传文件
	 * @param url 上传地址
	 * @param data 文件
	 * @returns
	 */
	upload = <T = any>(url: string, data?: any): Promise<T> => {
		return this.instance.post(url, data, { headers: { 'Content-Type': 'multipart/form-data' } });
	};
}
// 对于使用非此默认配置的，可传参 再暴露出多个配置axios
export default new Axios();