1.修改 .env.test 配置文件中 VITE_SERVICE_BASE_URL 和VITE_OTHER_SERVICE_BASE_URL, 记得带/api (这个文件是API跳转的基础URL)
2.修改 .env 文件中 VITE_HTTP_PROXY=Y 修改成Y:表示开启代理,在开发环境中,代理的主要作用是解决跨域问题,生产环境不建议开启,避免影响性能
3.修改 .env 文件中 VITE_SERVICE_SUCCESS_CODE 这里的成功状态码如果有很多个,可以用 , 分隔。
这个时候request请求需要改造支持多状态码,修改文件src\service-alova\request\index.ts 对应 createAlovaRequest 方法下的 isBackendSuccess
async isBackendSuccess(response) {
const resp = response.clone();
const data = await resp.json();
// 获取成功状态码列表(从环境变量中获取并解析为数组)
const successCodes = import.meta.env.VITE_SERVICE_SUCCESS_CODE.split(',').map(code => code.trim());
// 检查后端返回的 code 是否在成功状态码列表中
return successCodes.includes(String(data.code));
}
4.修改api方法fetchLogin中的userName
export function fetchLogin(userName: string, password: string) {
return alova.Post<Api.Auth.LoginToken>('/auth/login', { username: userName, password });
}
5.(1)修改api方法fetchGetUserInfo中api,GetUserInfo改GetCurrentUser
export function fetchGetUserInfo() {
return alova.Get<Api.Auth.UserInfo>('/auth/getCurrentUser');
}
interface UserInfo {
/** User ID (from backend: Id) */
id: number;
/** Username (from backend: Username) */
username: string; // 注意这里修改后,建议查询下 UserInfo. 或者 userInfo.
/** User roles (from backend: Roles) */
roles: string[];
/** Button permissions (frontend specific) */
buttons: string[];
}
6.路径:src\store\modules\auth\index.ts 下的const userInfo: Api.Auth.UserInfo = reactive 修改, 查询下 UserInfo. 或者 userInfo. 修改userInfo.userName 为 userInfo.username
const userInfo: Api.Auth.UserInfo = reactive({
id: 0,
username: '',
roles: [],
buttons: []
});
注意:(1)由于 axios 和 alova 的错误处理机制不同,axios 版本:返回 { data, error } 结构,alova 版本:直接返回数据或抛出异常,路径: src\store\modules\auth\index.ts 修改 auth store 以适配 alova 的返回格式。(2) 默认开发环境使用mock,可以删除对应的mock文件, 改为 requestAdapter: adapterFetch()