菜鸟教程
教程 axios tutorial

在拦截器中统一处理 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 是前端项目中最常用的认证策略，配合全局错误处理和请求封装，可大幅简化接口调用逻辑。

相关内容