Files
yudao-ui-admin-vben/apps/web-antdv-next/src/api/request.ts
XuZhiqiang 40f0ba71f5 feat(@vben/web-antdv-next): migrate ant-design-vue to antdv-next
Migration Summary: ant-design-vue → antdv-next
Core Changes
package.json - Replaced "ant-design-vue": "catalog:" with "antdv-next": "catalog:"

bootstrap.ts - Changed @vben/styles/antd to @vben/styles/antdv-next

adapter/component/index.ts - Major rewrite:

Removed dynamic defineAsyncComponent imports from ant-design-vue/es/...
Added static imports from antdv-next main entry
Renamed RangePicker → DateRangePicker, Textarea → TextArea
Defined local types for Rule, Locale, UploadRequestOption, FileType, Key
Bulk Import Replacements (100+ files)
from ant-design-vue → from antdv-next
from ant-design-vue/es/locale/... → from antdv-next/locale/...
from ant-design-vue/es/... → removed (use main entry)
from ant-design-vue/lib/... → removed (use main entry)
Component API Differences Handled
ant-design-vue	antdv-next	Files affected
Form.Item	FormItem	475 references
Tabs.TabPane	TabPane	240 references
Select.Option	SelectOption	151 references
Descriptions.Item	DescriptionsItem	2 references
Timeline.Item	TimelineItem	2 references
Radio.Group	RadioGroup	20 references
Collapse.Panel	CollapsePanel	9 references
Layout.Content/Sider/Header/Footer	LayoutContent/LayoutSider/...	14 references
Dropdown#overlay slot	Dropdown#popupRender	6 references
RangePicker	DateRangePicker	15+ references
Textarea	TextArea	37 references
ButtonGroup	Space (fallback)	12 references
Known Issues (requires manual attention)
List component - Not available in antdv-next. 4 files have TODO comments where List/List.Item/List.Item.Meta are used
@form-create/ant-design-vue - Kept as-is (compatible with antdv-next at runtime)
Type errors - ~366 type errors remain (vs 189 in web-antd), mostly pre-existing business logic issues and minor API differences
2026-05-12 15:30:08 +08:00

233 lines
7.5 KiB
TypeScript
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

/**
* 该文件可自行根据业务逻辑进行调整
*/
import type { RequestClientOptions } from '@vben/request';
import { isTenantEnable, useAppConfig } from '@vben/hooks';
import { preferences } from '@vben/preferences';
import {
authenticateResponseInterceptor,
defaultResponseInterceptor,
errorMessageResponseInterceptor,
RequestClient,
} from '@vben/request';
import { useAccessStore } from '@vben/stores';
import { createApiEncrypt } from '@vben/utils';
import { message } from 'antdv-next';
import { useAuthStore } from '#/store';
import { refreshTokenApi } from './core';
const { apiURL } = useAppConfig(import.meta.env, import.meta.env.PROD);
const tenantEnable = isTenantEnable();
const apiEncrypt = createApiEncrypt(import.meta.env);
function createRequestClient(baseURL: string, options?: RequestClientOptions) {
const client = new RequestClient({
...options,
baseURL,
});
/**
* 重新认证逻辑
*/
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() {
const accessStore = useAccessStore();
const refreshToken = accessStore.refreshToken as string;
if (!refreshToken) {
throw new Error('Refresh token is null!');
}
const resp = await refreshTokenApi(refreshToken);
const newToken = resp?.data?.data?.accessToken;
// add by 芋艿:这里一定要抛出 resp.data从而触发 authenticateResponseInterceptor 中,刷新令牌失败!!!
if (!newToken) {
throw resp.data;
}
accessStore.setAccessToken(newToken);
return newToken;
}
function formatToken(token: null | string) {
return token ? `Bearer ${token}` : null;
}
// 请求头处理
client.addRequestInterceptor({
fulfilled: async (config) => {
const accessStore = useAccessStore();
config.headers.Authorization = formatToken(accessStore.accessToken);
config.headers['Accept-Language'] = preferences.app.locale;
// 添加租户编号
config.headers['tenant-id'] = tenantEnable
? accessStore.tenantId
: undefined;
// 只有登录时,才设置 visit-tenant-id 访问租户
config.headers['visit-tenant-id'] = tenantEnable
? accessStore.visitTenantId
: undefined;
// 是否 API 加密
if ((config.headers || {}).isEncrypt) {
try {
// 加密请求数据
if (config.data) {
config.data = apiEncrypt.encryptRequest(config.data);
// 设置加密标识头
config.headers[apiEncrypt.getEncryptHeader()] = 'true';
}
} catch (error) {
console.error('请求数据加密失败:', error);
throw error;
}
}
return config;
},
});
// API 解密响应拦截器
client.addResponseInterceptor({
fulfilled: (response) => {
// 检查是否需要解密响应数据
const encryptHeader = apiEncrypt.getEncryptHeader();
const isEncryptResponse =
response.headers[encryptHeader] === 'true' ||
response.headers[encryptHeader.toLowerCase()] === 'true';
if (isEncryptResponse && typeof response.data === 'string') {
try {
// 解密响应数据
response.data = apiEncrypt.decryptResponse(response.data);
} catch (error) {
console.error('响应数据解密失败:', error);
throw new Error(`响应数据解密失败: ${(error as Error).message}`, {
cause: error,
});
}
}
return response;
},
});
// add by 芋艿:对应 https://t.zsxq.com/SHqWw 反馈
// 处理 Blob 响应中的业务错误(如 401后端把「账号未登录」包成 HTTP 200 + body {code: 401, msg: ...}
// download 强制 responseType: 'blob' 后被 axios 包成 application/json 的 BlobdefaultResponseInterceptor 走
// responseReturn === 'body' 分支直接返回,绕过了 authenticateResponseInterceptor 的 401 token 刷新;
// 这里把这种 Blob 解析回 JSON再以 axios 风格抛出,让后续拦截器接管
client.addResponseInterceptor({
fulfilled: async (response) => {
const blob = response.data;
if (!(blob instanceof Blob)) {
return response;
}
// Blob.type 在部分环境可能为空或大小写不一,叠加 response header 一起判断更稳
const blobType = (blob.type || '').toLowerCase();
const headerType = String(
response.headers?.['content-type'] ??
response.headers?.['Content-Type'] ??
'',
).toLowerCase();
if (
!blobType.includes('application/json') &&
!headerType.includes('application/json')
) {
return response;
}
let parsed: any;
try {
parsed = JSON.parse(await blob.text());
} catch {
return response;
}
if (parsed && parsed.code !== undefined && parsed.code !== 0) {
response.data = parsed;
throw Object.assign(new Error(parsed.msg ?? 'Request failed'), {
config: response.config,
response,
data: parsed,
isAxiosError: true,
});
}
return response;
},
});
// 处理返回的响应数据格式
client.addResponseInterceptor(
defaultResponseInterceptor({
codeField: 'code',
dataField: 'data',
successCode: 0,
}),
);
// token过期的处理
client.addResponseInterceptor(
authenticateResponseInterceptor({
client,
doReAuthenticate,
doRefreshToken,
enableRefreshToken: preferences.app.enableRefreshToken,
formatToken,
}),
);
// 通用的错误处理,如果没有进入上面的错误处理逻辑,就会进入这里
client.addResponseInterceptor(
errorMessageResponseInterceptor((msg: string, error) => {
// 这里可以根据业务进行定制,你可以拿到 error 内的信息进行定制化处理,根据不同的 code 做不同的提示,而不是直接使用 message.error 提示 msg
// 当前mock接口返回的错误字段是 error 或者 message
const responseData = error?.response?.data ?? {};
const errorMessage =
responseData?.error ?? responseData?.message ?? responseData.msg ?? '';
// add by 芋艿:特殊:避免 401 “账号未登录”,重复提示。因为,此时会跳转到登录界面,只需提示一次!!!
if (error?.data?.code === 401) {
return;
}
// 如果没有错误信息,则会根据状态码进行提示
message.error(errorMessage || msg);
}),
);
return client;
}
export const requestClient = createRequestClient(apiURL, {
responseReturn: 'data',
});
export const baseRequestClient = new RequestClient({ baseURL: apiURL });
baseRequestClient.addRequestInterceptor({
fulfilled: (config) => {
const accessStore = useAccessStore();
// 添加租户编号
config.headers['tenant-id'] = tenantEnable
? accessStore.tenantId
: undefined;
// 只有登录时,才设置 visit-tenant-id 访问租户
config.headers['visit-tenant-id'] = tenantEnable
? accessStore.visitTenantId
: undefined;
return config;
},
});