Vue Axios 网络请求如何在请求拦截器中自动携带本地存储的 Token

在 Vue 项目中，最规范做法是通过 Axios 请求拦截器自动携带 localStorage 中的 Token。具体为：封装 axios 实例并配置 baseURL、超时等；请求前读取 token 并设为 Authorization 头，支持 skipAuth 跳过；处理 Content-Type、耗时埋点及多来源兼容；最后全局挂载供组件调用。

在 Vue 项目中，通过 Axios 请求拦截器自动携带本地存储的 Token 是最规范、可维护性最强的做法。核心逻辑是：每次发请求前，从 localStorage（或 sessionStorage）读取 token，并注入到请求头的 Authorization 字段中，且支持跳过认证的特殊请求。

创建统一的 axios 实例并配置基础参数

不要直接使用 axios 原生对象，而是新建一个封装实例，便于集中管理 baseURL、超时、跨域等配置：

1. 在 src/utils/request.js（或 src/service/index.js）中创建实例
2. 设置 baseURL 为后端 API 根路径，避免每个请求写完整 URL
3. 启用 withCredentials: true（如需携带 cookie）
4. 设置合理超时时间（例如 10000 毫秒）

在请求拦截器中读取并注入 Token

关键步骤是在请求发出前检查是否存在有效 token，并决定是否添加到请求头：

1. 从 localStorage.getItem('token') 或 sessionStorage.getItem('token') 获取 token（推荐用 localStorage 保持登录态）
2. 判断 token 是否存在且非空字符串；若不存在，可选择跳过、清空状态或重定向登录页
3. 默认添加 config.headers.Authorization = 'Bearer ' + token
4. 支持灵活跳过：给请求配置加 skipAuth: true，比如登录接口本身就不需要 token

处理常见边界情况

实际项目中容易忽略但必须考虑的细节：

1. Content-Type 自动推断：若未手动设置 Content-Type，可根据 config.data 类型（如 FormData、Plain Object、JSON 字符串）自动补全，避免后端解析失败
2. 请求耗时埋点：可在拦截器里记录 config.metadata = { startTime: new Date() }，供响应拦截器计算耗时
3. 多 token 来源兼容：如果项目同时用 Pinia/Vuex 管理 token，优先读取 store 状态，fallback 到 localStorage
4. 空格与格式校验：确保 token 字符串不包含首尾空格，避免 Bearer xxx 导致认证失败

导出并全局挂载使用

完成封装后，在 main.js 或 app.js 中统一挂载，让所有组件可通过 this.$http 或组合式 API 的 useRequest 调用：

1. 导出封装后的实例：export default service
2. 挂载到 Vue 原型：app.config.globalProperties.$http = service（Vue 3 setup 语法糖下推荐用 provide/inject 或独立 hooks）
3. 组件内直接调用：this.$http.get('/user') 或 await api.get('/profile')，无需重复传 token