在 Vue 项目中，最规范做法是通过 Axios 请求拦截器自动携带 localStorage 中的 Token。具体为：封装 axios 实例并配置 baseURL、超时等；请求前读取 token 并设为 Authorization 头，支持 skipAuth 跳过；处理 Content-Type、耗时埋点及多来源兼容；最后全局挂载供组件调用。
在 Vue 项目中，通过 Axios 请求拦截器自动携带本地存储的 Token 是最规范、可维护性最强的做法。核心逻辑是：每次发请求前，从 localStorage（或 sessionStorage）读取 token，并注入到请求头的 Authorization 字段中，且支持跳过认证的特殊请求。
创建统一的 axios 实例并配置基础参数
不要直接使用 axios 原生对象，而是新建一个封装实例，便于集中管理 baseURL、超时、跨域等配置：
- 在
src/utils/request.js（或src/service/index.js）中创建实例 - 设置
baseURL为后端 API 根路径，避免每个请求写完整 URL - 启用
withCredentials: true（如需携带 cookie） - 设置合理超时时间（例如
10000毫秒）
在请求拦截器中读取并注入 Token
关键步骤是在请求发出前检查是否存在有效 token，并决定是否添加到请求头：
vue-component-analyzer
下载
递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。
- 从
localStorage.getItem('token')或sessionStorage.getItem('token')获取 token（推荐用localStorage保持登录态） - 判断 token 是否存在且非空字符串；若不存在，可选择跳过、清空状态或重定向登录页
- 默认添加
config.headers.Authorization = 'Bearer ' + token - 支持灵活跳过：给请求配置加
skipAuth: true，比如登录接口本身就不需要 token
处理常见边界情况
实际项目中容易忽略但必须考虑的细节：
立即学习“前端免费学习笔记（深入）”；
-
Content-Type 自动推断：若未手动设置
Content-Type，可根据config.data类型（如 FormData、Plain Object、JSON 字符串）自动补全，避免后端解析失败 -
请求耗时埋点：可在拦截器里记录
config.metadata = { startTime: new Date() }，供响应拦截器计算耗时 - 多 token 来源兼容：如果项目同时用 Pinia/Vuex 管理 token，优先读取 store 状态，fallback 到 localStorage
-
空格与格式校验：确保 token 字符串不包含首尾空格，避免
Bearer xxx导致认证失败
导出并全局挂载使用
完成封装后，在 main.js 或 app.js 中统一挂载，让所有组件可通过 this.$http 或组合式 API 的 useRequest 调用：
- 导出封装后的实例：
export default service - 挂载到 Vue 原型：
app.config.globalProperties.$http = service（Vue 3 setup 语法糖下推荐用 provide/inject 或独立 hooks） - 组件内直接调用：
this.$http.get('/user')或await api.get('/profile')，无需重复传 token
