本文解决 react 应用中 axios 实例初始化过早导致无法及时读取新写入 cookie 的 token 问题，通过请求拦截器实现每次请求前动态注入最新 token。
本文解决 react 应用中 axios 实例初始化过早导致无法及时读取新写入 cookie 的 token 问题，通过请求拦截器实现每次请求前动态注入最新 token。
在基于 React 和 js-cookie 的前端项目中，常见做法是在用户登录成功后将 JWT Token 写入 Cookie（如 Cookies.set("token", response.data.token)），随后在 Axios 请求头中携带该 Token 进行鉴权。但若像原始代码那样在 axios 实例创建时一次性读取 Cookie：
const token = Cookies.get("token"); // ⚠️ 仅执行一次，页面加载时读取
const api = axios.create({
headers: { ...(token && { "x-access-token": token }) },
});
则会导致：即使登录后 token 已成功写入 Cookie，Axios 实例的 headers 仍维持初始空值（undefined），直到手动刷新页面——因为实例未重建，token 变量不会自动更新。
✅ 正确解法是利用 Axios 请求拦截器（request interceptor），确保每次发起 HTTP 请求前，都实时从 Cookie 中读取最新 Token 并注入请求头：
import axios from "axios";
import Cookies from "js-cookie";
const api = axios.create({
baseURL: process.env.REACT_APP_API_URL,
timeout: 10000,
headers: {
"Access-Control-Allow-Origin": "*",
"Content-Type": "application/json",
},
});
// ✅ 动态注入 Token：每次请求前执行
api.interceptors.request.use((config) => {
const token = Cookies.get("token");
if (token) {
config.headers["x-access-token"] = token;
}
return config;
});
export default api;
? 关键优势：
- Token 更新（如登录、续期、登出）后立即生效，无需刷新页面；
- 避免因异步时机（如登录后跳转 vs Axios 初始化顺序）导致的竞态问题；
- 符合单一职责原则——Token 管理与请求逻辑解耦。
⚠️ 注意事项：
- 若使用
httpOnlyCookie（服务端写入、前端不可读），js-cookie将无法获取，此时应改用服务端透传或结合AuthorizationBearer 头 + 后端 Session 策略； - 登出时务必同步清除 Cookie：
Cookies.remove("token")，否则拦截器仍会附带已失效 Token； - 如需支持多环境 Token 键名（如
"auth_token"），建议封装为可配置函数，提升可维护性。
通过拦截器模式，你不仅解决了 Token 延迟生效问题，更构建了可扩展、响应式的认证请求流程——这是现代前端 API 客户端设计的最佳实践之一。
