Vue3 后台框架的网络请求怎么设计？看 XYGo Admin 三套 Axios 实例与拦截器方案
做后台管理项目，网络请求层是最容易写乱的地方——Token 混用、接口前缀硬编码、拦截器逻辑散落各处。接手过屎山项目的同学应该都懂。
XYGo Admin 在这方面做了一层很清晰的封装，今天拆开聊聊它的设计思路。
三套请求实例，各司其职
最核心的设计是用 createPrefixedApi(prefix) 工厂函数，按业务域拆出三个独立实例：
// 后台管理接口 — 自动注入 Bearer Token
export const adminRequest = createPrefixedApi('/admin')
// 前台会员接口 — 自动注入 Xy-User-Token
export const memberRequest = createPrefixedApi('/member')
// 前台公共接口 — 无需 Token
export const siteRequest = createPrefixedApi('/site')
这个设计妙在哪？不同域天然隔离，不用每次调接口时手动区分 Token 类型。后台管理员和前台会员使用的是完全不同的认证体系，在一个项目里分开管理远比混在一起安全。
每个实例提供五个标准方法：
| 方法 | 说明 |
|---|---|
adminRequest.get<T>({ url, params?, config? }) | GET 请求 |
adminRequest.post<T>({ url, params?, config? }) | POST 请求 |
adminRequest.put<T>({ url, params?, config? }) | PUT 请求 |
adminRequest.del<T>({ url, params?, config? }) | DELETE 请求 |
adminRequest.request<T>(config) | 通用请求 |
拦截器的自动分流逻辑
请求拦截器做的事情很纯粹——根据 URL 前缀自动选择 Token 注入策略：
/admin开头 →Authorization: Bearer <token>/member开头 →Xy-User-Token: <token>- 其他 → 不注入 Token
响应拦截器对业务码做了分层处理：
- 0 (success)：直接返回
response.data.data，业务代码不用多解一层 - -1 (error)：
ElMessage提示错误信息 - 61 (unauthorized)：清除 Token + 跳转登录页，带 3 秒防抖避免并发请求反复跳
- 10010 (kickedOut)：弹窗提示被踢下线
防抖跳转登录这个细节挺实用——多个接口同时返回 401 时不会弹出一串登录页。
实际使用：API 层怎么写
封装完后，业务代码里调用就非常干净：
import { adminRequest } from '@/utils/http'
export function fetchDocList(params: any) {
return adminRequest.get({ url: '/cmsDoc/list', params })
}
export function fetchSaveDoc(data: any) {
return adminRequest.post({ url: '/cmsDoc/edit', params: data })
}
export function fetchDeleteDoc(id: number) {
return adminRequest.post({ url: '/cmsDoc/delete', params: { id } })
}
每个 API 文件只负责声明接口，不关心 Token、不关心错误处理，职责单一。
配置项一览
- baseURL：来自环境变量
VITE_API_URL，切换环境不用改代码 - 超时：15 秒，够用也不拖沓
- 失败重试：可配置，默认关闭
总结
XYGo Admin 的网络请求层设计不算花哨，但务实——三实例隔离前后台认证、拦截器自动分流 Token、响应码分层处理，该有的都有。这种封装思路可以直接复用到你自己的 Vue3 后台管理框架 里。对后台管理框架感兴趣的同学，可以去 XYGo Admin 官网看完整的项目结构和代码实现。
