# 动态设置请求头与 Token

URL: https://caijiao.org/axios/wrapper/dynamic-header
Source: docs/axios/wrapper/dynamic-header.md
Description: 本章节讲解如何在 Axios 请求中动态设置请求头（headers），实现用户登录后自动携带 Token，以及针对特定请求自定义 Header 的多种方式。

在实际项目中，请求头（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