277 lines
8.9 KiB
TypeScript
277 lines
8.9 KiB
TypeScript
/**
|
||
* 该文件可自行根据业务逻辑进行调整
|
||
*/
|
||
import type { HttpResponse } from '@vben/request';
|
||
|
||
import { useAppConfig } from '@vben/hooks';
|
||
import { $t } from '@vben/locales';
|
||
import { preferences } from '@vben/preferences';
|
||
import {
|
||
authenticateResponseInterceptor,
|
||
errorMessageResponseInterceptor,
|
||
RequestClient,
|
||
stringify,
|
||
} from '@vben/request';
|
||
import { useAccessStore } from '@vben/stores';
|
||
|
||
import { message, Modal } from 'ant-design-vue';
|
||
import { isEmpty, isNull } from 'lodash-es';
|
||
|
||
import { useAuthStore } from '#/store';
|
||
import {
|
||
decryptBase64,
|
||
decryptWithAes,
|
||
encryptBase64,
|
||
encryptWithAes,
|
||
generateAesKey,
|
||
} from '#/utils/encryption/crypto';
|
||
import * as encryptUtil from '#/utils/encryption/jsencrypt';
|
||
|
||
const { apiURL, clientId, enableEncrypt } = useAppConfig(
|
||
import.meta.env,
|
||
import.meta.env.PROD,
|
||
);
|
||
|
||
/**
|
||
* 是否已经处在登出过程中了 一个标志位
|
||
* 主要是防止一个页面会请求多个api 都401 会导致登出执行多次
|
||
*/
|
||
let isLogoutProcessing = false;
|
||
|
||
function createRequestClient(baseURL: string) {
|
||
const client = new RequestClient({
|
||
// 后端地址
|
||
baseURL,
|
||
// 消息提示类型
|
||
errorMessageMode: 'message',
|
||
// 是否返回原生响应 比如：需要获取响应头时使用该属性
|
||
isReturnNativeResponse: false,
|
||
// 需要对返回数据进行处理
|
||
isTransformResponse: true,
|
||
});
|
||
|
||
/**
|
||
* 重新认证逻辑
|
||
*/
|
||
async function doReAuthenticate() {
|
||
console.warn('Access token or refresh token is invalid or expired. ');
|
||
const accessStore = useAccessStore();
|
||
const authStore = useAuthStore();
|
||
accessStore.setAccessToken(null);
|
||
if (
|
||
preferences.app.loginExpiredMode === 'modal' &&
|
||
accessStore.isAccessChecked
|
||
) {
|
||
accessStore.setLoginExpired(true);
|
||
} else {
|
||
await authStore.logout();
|
||
}
|
||
}
|
||
|
||
/**
|
||
* 刷新token逻辑
|
||
*/
|
||
async function doRefreshToken() {
|
||
// 不需要
|
||
// 保留此方法只是为了合并方便
|
||
return '';
|
||
}
|
||
|
||
function formatToken(token: null | string) {
|
||
return token ? `Bearer ${token}` : null;
|
||
}
|
||
|
||
client.addRequestInterceptor({
|
||
fulfilled: (config) => {
|
||
const accessStore = useAccessStore();
|
||
// 添加token
|
||
config.headers.Authorization = formatToken(accessStore.accessToken);
|
||
/**
|
||
* locale跟后台不一致 需要转换
|
||
*/
|
||
const language = preferences.app.locale.replace('-', '_');
|
||
config.headers['Accept-Language'] = language;
|
||
config.headers['Content-Language'] = language;
|
||
// 添加全局clientId
|
||
config.headers.clientId = clientId;
|
||
|
||
/**
|
||
* 格式化get/delete参数
|
||
* 如果包含自定义的paramsSerializer则不走此逻辑
|
||
*/
|
||
if (
|
||
['DELETE', 'GET'].includes(config.method?.toUpperCase() || '') &&
|
||
config.params &&
|
||
!config.paramsSerializer
|
||
) {
|
||
/**
|
||
* 1. 格式化参数 微服务在传递区间时间选择(后端的params Map类型参数)需要格式化key 否则接收不到
|
||
* 2. 数组参数需要格式化 后端才能正常接收 会变成arr=1&arr=2&arr=3的格式来接收
|
||
*/
|
||
config.paramsSerializer = (params) =>
|
||
stringify(params, { arrayFormat: 'repeat' });
|
||
}
|
||
|
||
const { encrypt } = config;
|
||
// 全局开启请求加密功能 && 该请求开启 && 是post/put请求
|
||
if (
|
||
enableEncrypt &&
|
||
encrypt &&
|
||
['POST', 'PUT'].includes(config.method?.toUpperCase() || '')
|
||
) {
|
||
const aesKey = generateAesKey();
|
||
config.headers['encrypt-key'] = encryptUtil.encrypt(
|
||
encryptBase64(aesKey),
|
||
);
|
||
|
||
config.data =
|
||
typeof config.data === 'object'
|
||
? encryptWithAes(JSON.stringify(config.data), aesKey)
|
||
: encryptWithAes(config.data, aesKey);
|
||
}
|
||
return config;
|
||
},
|
||
});
|
||
|
||
// 通用的错误处理, 如果没有进入上面的错误处理逻辑，就会进入这里
|
||
// 主要处理http状态码不为200的情况 必须放在在下面的响应拦截器之前
|
||
client.addResponseInterceptor(
|
||
errorMessageResponseInterceptor((msg: string) => message.error(msg)),
|
||
);
|
||
|
||
client.addResponseInterceptor<HttpResponse>({
|
||
fulfilled: async (response) => {
|
||
const encryptKey = (response.headers || {})['encrypt-key'];
|
||
if (encryptKey) {
|
||
/** RSA私钥解密 拿到解密秘钥的base64 */
|
||
const base64Str = encryptUtil.decrypt(encryptKey);
|
||
/** base64 解码 得到请求头的 AES 秘钥 */
|
||
const aesSecret = decryptBase64(base64Str.toString());
|
||
/** 使用aesKey解密 responseData */
|
||
const decryptData = decryptWithAes(
|
||
response.data as unknown as string,
|
||
aesSecret,
|
||
);
|
||
/** 赋值 需要转为对象 */
|
||
response.data = JSON.parse(decryptData);
|
||
}
|
||
|
||
const { isReturnNativeResponse, isTransformResponse } = response.config;
|
||
// 是否返回原生响应 比如：需要获取响应时使用该属性
|
||
if (isReturnNativeResponse) {
|
||
return response;
|
||
}
|
||
// 不进行任何处理，直接返回
|
||
// 用于页面代码可能需要直接获取code，data，message这些信息时开启
|
||
if (!isTransformResponse) {
|
||
/**
|
||
* 需要判断下载二进制的情况 正常是返回二进制 报错会返回json
|
||
* 当type为blob且content-type为application/json时 则判断已经下载出错
|
||
* 不能直接去判断blob的类型 因为下载json类型和报错的类型是一致的 需要从响应头判断
|
||
*/
|
||
if (
|
||
response.config.responseType === 'blob' &&
|
||
response.headers['content-type']?.includes?.('application/json')
|
||
) {
|
||
// 这时候的data为blob类型
|
||
const blob = response.data as unknown as Blob;
|
||
// 拿到字符串转json对象
|
||
response.data = JSON.parse(await blob.text());
|
||
// 然后按正常逻辑执行下面的代码(判断业务状态码)
|
||
} else {
|
||
// 不为blob 直接返回
|
||
return response.data;
|
||
}
|
||
}
|
||
|
||
const axiosResponseData = response.data;
|
||
if (!axiosResponseData) {
|
||
throw new Error($t('fallback.http.apiRequestFailed'));
|
||
}
|
||
|
||
// ruoyi-plus没有采用严格的{code, msg, data}模式
|
||
const { code, data, msg, ...other } = axiosResponseData;
|
||
|
||
// 这里逻辑可以根据项目进行修改
|
||
const hasSuccess = Reflect.has(axiosResponseData, 'code') && code === 200;
|
||
if (hasSuccess) {
|
||
let successMsg = msg;
|
||
|
||
if (isNull(successMsg) || isEmpty(successMsg)) {
|
||
successMsg = $t(`fallback.http.operationSuccess`);
|
||
}
|
||
|
||
if (response.config.successMessageMode === 'modal') {
|
||
Modal.success({
|
||
content: successMsg,
|
||
title: $t('fallback.http.successTip'),
|
||
});
|
||
} else if (response.config.successMessageMode === 'message') {
|
||
message.success(successMsg);
|
||
}
|
||
// 如果有data 直接返回data 没有data将剩余参数(...other)封装为data返回
|
||
// 需要考虑data为null的情况(比如查询为空)
|
||
if (data !== undefined) {
|
||
return data;
|
||
}
|
||
return other;
|
||
}
|
||
// 在此处根据自己项目的实际情况对不同的code执行不同的操作
|
||
// 如果不希望中断当前请求，请return数据，否则直接抛出异常即可
|
||
let timeoutMsg = '';
|
||
switch (code) {
|
||
case 401: {
|
||
// 已经在登出过程中 不再执行
|
||
if (isLogoutProcessing) {
|
||
return;
|
||
}
|
||
isLogoutProcessing = true;
|
||
const _msg = '登录超时, 请重新登录';
|
||
const userStore = useAuthStore();
|
||
userStore.logout().finally(() => {
|
||
message.error(_msg);
|
||
isLogoutProcessing = false;
|
||
});
|
||
// 不再执行下面逻辑
|
||
return;
|
||
}
|
||
default: {
|
||
if (msg) {
|
||
timeoutMsg = msg;
|
||
}
|
||
}
|
||
}
|
||
|
||
// errorMessageMode='modal'的时候会显示modal错误弹窗，而不是消息提示，用于一些比较重要的错误
|
||
// errorMessageMode='none' 一般是调用时明确表示不希望自动弹出错误提示
|
||
if (response.config.errorMessageMode === 'modal') {
|
||
Modal.error({
|
||
content: timeoutMsg,
|
||
title: $t('fallback.http.errorTip'),
|
||
});
|
||
} else if (response.config.errorMessageMode === 'message') {
|
||
message.error(timeoutMsg);
|
||
}
|
||
|
||
throw new Error(timeoutMsg || $t('fallback.http.apiRequestFailed'));
|
||
},
|
||
});
|
||
|
||
// token过期的处理
|
||
client.addResponseInterceptor(
|
||
authenticateResponseInterceptor({
|
||
client,
|
||
doReAuthenticate,
|
||
doRefreshToken,
|
||
enableRefreshToken: preferences.app.enableRefreshToken,
|
||
formatToken,
|
||
}),
|
||
);
|
||
|
||
return client;
|
||
}
|
||
|
||
export const requestClient = createRequestClient(apiURL);
|
||
|
||
export const baseRequestClient = new RequestClient({ baseURL: apiURL });
|