vue3前端框架如何对接后台使用？XYGo Admin 给出标准答案Vue3前端如何对接GoFrame后台？本文详解三套

vue3前端框架如何对接后台使用？XYGo Admin 给出标准答案

做后台管理系统，前端对接后台是最让人头疼的环节之一。接口怎么组织、Token 怎么管理、请求怎么封装……这些问题处理不好，后期维护就是噩梦。

如果你也在研究 vue3前端框架如何对接后台，XYGo Admin 这套 GoFrame + Vue3 的开源方案给出了一个标准答案，今天来详细拆解它的前端对接设计。

完整请求链路一览

从用户操作到数据库返回，整条链路是这样的：

前端 Axios 拦截器（自动注入 Token）
  → HTTP 请求
    → Nginx 反向代理
      → GoFrame HTTP Server
        → CORS 中间件 → 鉴权中间件（JWT 校验）→ 操作日志中间件
          → Controller → Service → Logic → DAO → DB

XYGo Admin 的前端基于 Vue 3.5 + TypeScript，通过 Vite 7 构建，和 GoFrame 后端之间的职责边界非常清晰：后端负责所有业务逻辑和鉴权，前端只管发请求、收响应、渲染页面。

三套请求实例，覆盖所有场景

传统方案往往只封装一套请求，然后靠 if-else 判断该用哪个 Token。XYGo Admin 的做法更工程化：三套请求实例，按场景严格区分。

请求实例	URL 前缀	Token 方式	使用场景
`adminRequest`	`/admin`	Bearer Token	平台后台管理
`memberRequest`	`/member`	Xy-User-Token	前台会员
`siteRequest`	`/site`	无	公共接口（无需登录）

核心代码在这个工厂函数：

// 后台管理接口 — 自动注入 Bearer Token
export const adminRequest = createPrefixedApi('/admin')

// 前台会员接口 — 自动注入 Xy-User-Token
export const memberRequest = createPrefixedApi('/member')

// 公共接口 — 无需登录
export const siteRequest = createPrefixedApi('/site')

实际项目中，更多用到的是 adminRequest，它默认往 /admin 前缀的接口发请求，自动携带 Bearer Token。

请求拦截器：Token 自动注入，零感切换

最繁琐的工作——在请求头里塞 Token——由拦截器自动完成：

/admin 开头的 URL → 自动注入 Authorization: Bearer <token>
/member 开头 → 注入 Xy-User-Token: <token>
其他 → 不注入 Token

你只需要调用 adminRequest.get({ url: '/user/list' })，Token 自动就带上去了。

响应拦截器：状态码自动分流

请求发出去后，响应回来同样不需要你操心。拦截器根据返回的 code 自动处理：

业务码	含义	处理方式
0	成功	返回 data 字段
-1	业务错误	ElMessage 提示
61	未授权	清除 Token，跳转登录页（3 秒防抖）
10010	被踢下线	弹窗提示

对于 vue3前端框架如何对接后台 这个问题，核心就是理解这套 code 机制。前端不需要手动判断什么，只要接住对应的处理就行。

一个完整的增删改查示例

// api/backend/cms/doc.ts
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 } })
}

这套写法在 XYGo Admin 的前端项目里是标准模式，三套请求实例、统一的拦截器处理，你只管调接口。

认证流程：登录到获取菜单

整个认证链路：

用户访问 /login，输入账号密码
前端 POST /admin/auth/login 到后端
后端验证账号密码，签发 JWT（包含管理员信息）
前端拿到 Token，存到 Pinia Store（持久化到 localStorage）
后续请求自动带上 Token
GET /admin/menu/routes 获取菜单
前端根据菜单动态注册路由，跳转到首页

整个链路跑通后，vue3前端框架如何对接后台 的问题就彻底解决了。

总结

回到最初的问题：vue3前端框架如何对接后台使用？

用三套请求实例区分不同场景
请求拦截器自动注入 Token，你不用手动处理
响应拦截器统一处理 code，你只管接数据
认证流程：登录 → 拿 Token → 存 Token → 后续请求自动带

XYGo Admin 把这套流程封装得很完整，前端只需要按规范写接口调用，就能无缝对接 GoFrame 后端。

如果你的团队正在做 vue3前端框架如何对接后台使用的技术选型，建议直接参考 XYGo Admin 的前端目录结构和 src/utils/http 里的封装实现，能少走很多弯路。