Zustand设置Token后组件不重新渲染问题求助

你的核心问题是Axios实例初始化时就固定了Token，后续Token更新后没有同步到请求头，导致登录后请求仍使用旧Token，刷新页面才重新读取新Token初始化实例。下面是两种可行的解决方法：

方法一：使用Axios请求拦截器动态注入最新Token #

这是最推荐的方案，能确保每次请求都自动携带最新的Token，无需手动更新实例配置：

1. 修改apiClient的创建逻辑，移除初始化时的Token，添加请求拦截器：

const apiClient = axios.create({
  baseURL: apiURL,
  headers: {
    // 只保留固定的请求头，比如Content-Type
    "Content-Type": "application/json",
  },
});

// 请求拦截器：每次发送请求前注入最新Token
apiClient.interceptors.request.use(
  (config) => {
    // 从Zustand Store获取最新Token（非组件环境用getState()）
    const latestToken = useStore.getState().auth.token;
    if (latestToken) {
      config.headers["Token"] = `${latestToken}`;
    }
    return config;
  },
  (error) => Promise.reject(error)
);

2. 在Zustand的authSlice中维护Token状态，登录成功后更新状态和本地存储：

const authSlice = (set, get) => ({
  token: localStorage.getItem("token") || null,
  login: async (credentials) => {
    // 登录请求不需要带Token，直接调用apiClient即可
    const response = await apiClient.post("/login", credentials);
    const newToken = response.data.token;
    
    // 更新Zustand状态
    set((state) => ({
      auth: { ...state.auth, token: newToken }
    }));
    // 同步到本地存储
    localStorage.setItem("token", newToken);
  },
  // 登出逻辑同步更新状态和存储
  logout: () => {
    set((state) => ({ auth: { ...state.auth, token: null } }));
    localStorage.removeItem("token");
  }
});

方法二：登录成功后手动更新Axios实例的请求头 #

如果不想用拦截器，可以在登录成功后直接修改apiClient的默认请求头：

const authSlice = (set, get) => ({
  token: localStorage.getItem("token") || null,
  login: async (credentials) => {
    const response = await apiClient.post("/login", credentials);
    const newToken = response.data.token;
    
    set((state) => ({
      auth: { ...state.auth, token: newToken }
    }));
    localStorage.setItem("token", newToken);
    
    // 手动更新apiClient的请求头
    apiClient.defaults.headers["Token"] = `${newToken}`;
  },
});

问题根源说明 #

你初始化apiClient时，token变量是从localStorage读取的静态值，后续登录更新Token后，这个变量不会自动同步，apiClient的请求头也不会变化。只有刷新页面时，apiClient重新初始化，才会读取新的Token。

内容的提问来源于stack exchange，提问作者hj.paul7