Vue 3 中请求拦截器应通过独立 Axios 实例集中配置并全局注册，组合式 API 仅消费封装好的语义化函数；拦截器需读取 Pinia store 中响应式 token，避免在 setup 中重复注册或硬编码凭证。
Vue 3 中请求拦截器不直接“结合”组合式 API 注入配置，而是通过独立的 Axios 实例 + 拦截器完成全局配置，再由组合式 API 按需调用该实例。关键在于：配置和拦截逻辑必须脱离组件生命周期，放在可复用、可提前初始化的模块中；组合式 API 只负责消费，不负责定义底层通信规则。
创建独立的 Axios 实例并集中配置
在 src/api/http/client.ts 中创建实例，统一管理 baseURL、超时、默认 headers 等：
- 使用
axios.create()创建干净实例，避免污染全局 axios - 把环境变量（如
import.meta.env.VUE_APP_API_BASE）注入baseURL - 设置
timeout: 10000、withCredentials: true等通用项 - 导出该实例，供后续拦截器注册和组合函数使用
在拦截器中读取响应式状态（如 token）
请求拦截器需要动态获取用户凭证，不能硬编码。推荐方式是配合 Pinia：
vue-admin-change-reviewer
下载
审查 Vue 管理后台的变更请求（Vue 2 + Element UI，Vue 3 + Element Plus）。重点关注最小化变更实现、上线风险检查以及回归检查清单生成。
- 在
src/stores/user.ts中定义一个useUserStore()，其中token是ref或computed - 拦截器里直接调用
useUserStore().token—— 因为 Pinia store 在 setup 之外也可访问，且响应式值会自动更新 - 若未登录，跳过添加 Authorization 头；若有 token，拼成
Bearer ${token.value}写入config.headers
组合式 API 中只调用封装好的请求函数
不要在 setup() 里重复写 axios.get，而是封装语义化函数：
立即学习“前端免费学习笔记（深入）”；
- 新建
src/api/modules/user.ts，导出useUserInfo()等组合函数 - 内部使用上一步导出的 Axios 实例发起请求，并用
ref管理 loading / data / error - 组件中直接解构使用：
const { data, loading, execute } = useUserInfo() - 这样既复用了拦截器逻辑（token、loading 计数、错误跳转），又保持了组合式 API 的响应式优势
避免常见误区
有些做法看似“结合”，实则破坏架构清晰性：
- ❌ 不要在每个
setup()里手动调用axios.interceptors.request.use—— 拦截器必须全局注册一次 - ❌ 不要将 token 存在
reactive({ token: '' })里再传给拦截器 —— 无法触发拦截器重执行 - ❌ 不要用
getCurrentInstance()在拦截器里访问组件实例 —— 拦截器运行时组件可能不存在 - ✅ 正确路径：配置 → 实例 → 拦截器（读 Pinia）→ 组合函数（调实例）→ 组件（用函数）
