Vue3 后台框架的网络请求怎么设计？看 XYGo Admin 三套 Axios 实例与拦截器方案

做后台管理项目，网络请求层是最容易写乱的地方------Token 混用、接口前缀硬编码、拦截器逻辑散落各处。接手过屎山项目的同学应该都懂。

XYGo Admin 在这方面做了一层很清晰的封装，今天拆开聊聊它的设计思路。

三套请求实例，各司其职

最核心的设计是用 createPrefixedApi(prefix) 工厂函数，按业务域拆出三个独立实例：

typescript 复制代码

// 后台管理接口 --- 自动注入 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 层怎么写

封装完后，业务代码里调用就非常干净：

typescript 复制代码

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 官网看完整的项目结构和代码实现。