# 在拦截器中统一处理 Token

URL: https://caijiao.org/axios/interceptors/token
Source: docs/axios/interceptors/token.md
Description: 本章节讲解如何在 Axios 的请求与响应拦截器中统一处理 Token，包括自动添加请求头、刷新过期 Token、以及统一错误处理，帮助前端项目实现安全、统一的认证机制。

在前端项目中，Token 用于接口鉴权。通过 Axios 拦截器可以在所有请求统一添加 Token，并在响应中处理过期或失效的情况。

## 1. 请求拦截器中添加 Token

```javascript
import axios from "axios";

const instance = axios.create({
  baseURL: "https://api.example.com",
  timeout: 7000,
});

instance.interceptors.request.use(
  (config) => {
    const token = localStorage.getItem("auth_token");
    if (token) {
      config.headers["Authorization"] = `Bearer ${token}`;
    }
    return config;
  },
  (error) => Promise.reject(error)
);
```

## 2. 响应拦截器中处理 Token 过期

```javascript
instance.interceptors.response.use(
  (response) => response,
  async (error) => {
    if (error.response && error.response.status === 401) {
      // 401 未授权，可能 Token 过期
      // 可以尝试刷新 Token 或跳转登录页
      try {
        const refreshToken = localStorage.getItem("refresh_token");
        const res = await axios.post("/auth/refresh", { token: refreshToken });
        localStorage.setItem("auth_token", res.data.token);

        // 重新发送原请求
        error.config.headers["Authorization"] = `Bearer ${res.data.token}`;
        return axios(error.config);
      } catch (refreshError) {
        // 刷新失败，跳转登录
        window.location.href = "/login";
      }
    }
    return Promise.reject(error);
  }
);
```

## 3. 使用示例

```javascript
instance
  .get("/users/profile")
  .then((profile) => console.log("用户信息：", profile))
  .catch((err) => console.error("请求异常：", err));
```

## 4. 优势

- 无需在每个请求手动添加 Token；
- 可以统一处理 Token 过期、刷新和重试逻辑；
- 提升项目安全性和可维护性。

---

> 💡 小提示：在拦截器中统一处理 Token 是前端项目中最常用的认证策略，配合全局错误处理和请求封装，可大幅简化接口调用逻辑。