菜鸟教程
教程 axios tutorial

动态设置请求头与 Token

在实际项目中，请求头（headers）经常需要根据用户状态、接口类型或运行环境动态调整。尤其是携带身份令牌（Token）时，正确的配置方式能避免请求失败或安全风险。

1. 基础：在请求时手动设置 Header

你可以在每次请求中手动传入 headers 参数：

js 
import axios from 'axios';

axios.get('/api/user/info', {
  headers: {
    Authorization: 'Bearer ' + localStorage.getItem('token'),
    'X-Custom-Header': 'CustomValue'
  }
});

`

这种方式简单直接，但在项目中需要多次编写，维护成本较高。

2. 使用请求拦截器统一注入 Token

更推荐的方式是在 Axios 拦截器中动态注入 Token。 当用户登录后将 Token 保存到 localStorage、sessionStorage 或状态管理（如 Pinia、Redux）中：

js 
import axios from 'axios';

const service = axios.create({
  baseURL: '/api',
  timeout: 8000
});

service.interceptors.request.use(
  (config) => {
    const token = localStorage.getItem('token');
    if (token) {
      config.headers.Authorization = `Bearer ${token}`;
    }
    return config;
  },
  (error) => Promise.reject(error)
);

export default service;

这样所有请求都会自动携带 Token，无需每次手动设置。

3. 动态修改请求头（针对特定接口）

有时你需要在调用某些接口时临时更改请求头，例如文件上传、特殊认证：

js 
import request from '@/utils/request';

// 临时添加 Content-Type
request.post('/file/upload', formData, {
  headers: {
    'Content-Type': 'multipart/form-data'
  }
});

你也可以在发起请求前修改 headers：

js 
const instance = request;
instance.defaults.headers.common['X-Request-From'] = 'WebApp';

4. 使用自定义函数动态设置 Header

可以通过辅助函数实现灵活注入：

js 
import request from '@/utils/request';

export function requestWithHeader(url, data, extraHeaders = {}) {
  return request.post(url, data, {
    headers: {
      ...extraHeaders,
      Authorization: 'Bearer ' + localStorage.getItem('token')
    }
  });
}

// 使用示例
requestWithHeader('/api/admin/action', { id: 1 }, { 'X-Mode': 'admin' });

5. Token 过期处理方案

在响应拦截器中检测 Token 是否过期并自动跳转登录：

js 
service.interceptors.response.use(
  (response) => response.data,
  (error) => {
    if (error.response && error.response.status === 401) {
      console.warn('Token 已过期，请重新登录');
      localStorage.removeItem('token');
      window.location.href = '/login';
    }
    return Promise.reject(error);
  }
);

6. 最佳实践建议

  • ✅ 登录成功后保存 Token 到安全的存储位置（如 localStorage 或状态管理）
  • ✅ 使用请求拦截器统一设置 Token，保持逻辑一致
  • ✅ 响应拦截器中处理 Token 失效逻辑
  • ✅ 对于特定请求可临时添加或覆盖 headers
  • ✅ 避免 Token 泄露，切勿在日志中输出完整 Token

相关内容