LocalStorage存在Token但Axios实例请求未携带该Token如何解决

开发者阿泽

2026-10-1

根因说明

你观察到的结论完全正确：axios.create传入的配置项是静态常量，仅会在Axios实例创建的那一刻执行一次计算。你的Axios实例在模块加载阶段就完成了初始化，此时用户尚未登录，localStorage中token为空，后续即使登录后写入了新的token，实例的默认headers也不会自动更新，这就是请求始终没有携带有效token的原因。
原来的getTokenFromLocalStorage只会在模块初始化时执行一次，所以后续你看不到它的日志输出。

解决方案：使用Axios请求拦截器

Axios提供的请求拦截器可以在每次请求发起前统一修改配置，是动态注入token的标准实现方案，修改你的Axios实例配置代码如下：

import axios from 'axios';

const API_BASE_URL = '你的接口基础地址';
const AxiosInstance = axios.create({
  baseURL: API_BASE_URL,
});

// 新增请求拦截器：每次请求前都获取最新的token注入header
AxiosInstance.interceptors.request.use(
  (config) => {
    const token = localStorage.getItem('token');
    if (token) {
      config.headers.Authorization = `Bearer ${token}`;
    }
    return config;
  },
  (error) => Promise.reject(error)
);

export default AxiosInstance;

其他需要修正的代码问题

你当前的validateToken方法存在语法错误，.then("did it")是无效写法，then方法需要传入回调函数才能正确拿到接口返回结果，修正后代码：

validateToken() {
  console.log(" about to try validating");
  return AxiosInstance.get("authenticate")
    .then((res) => res)
    .catch((err) => {
      console.log(err);
      return null;
    });
}