React中Axios设置认证头前发起API请求致首次渲染失败

在配置AuthContext时遇到以下问题：首次渲染时，API请求在Axios设置Authorization请求头之前就被触发，导致接口返回missing authentication parameters错误，通过debugger可确认API请求执行顺序早于认证头设置。

核心原因 #

1. 渲染顺序问题：AuthContext中的认证初始化逻辑（checkIfLogged）通过useEffect执行，而React的渲染流程是父组件渲染 → 子组件渲染 → 父组件useEffect执行，因此Home组件会先完成渲染并发起API请求，此时Axios还未完成认证头配置。
2. API客户端无认证依赖：ApiContext中的ApiClient是静态创建的，未关联认证状态，无论认证是否完成都会被直接调用。

解决方案 #

方案一：通过状态控制子组件渲染时机

在AuthContext中添加isAuthReady状态，仅当认证初始化完成后才渲染子组件，确保API请求不会提前触发。

修改后的AuthContext代码：

import React, { createContext, useState, useEffect, useContext, useCallback } from "react";
import AuthService from "./authService";

// 实例化AuthService（原代码遗漏此步骤）
const authService = new AuthService("your-redirect-prefix");

const hardcodedToken = "your-hardcoded-token-here";
const AuthContext = createContext(null);

export const AuthContextProvider = ({ children }) => {
  const [token, setToken] = useState(null);
  const [isAuthenticated, setIsAuthenticated] = useState(false);
  // 新增状态标记认证初始化完成
  const [isAuthReady, setIsAuthReady] = useState(false);

  const checkIfLogged = useCallback(async () => {
    const token = hardcodedToken;

    if (token) {
      setToken(token);
      setIsAuthenticated(true);
      authService.setAxiosDefaults(token);
    } else {
      setIsAuthenticated(false);
      authService.TODOLogout();
    }
    // 无论认证结果如何，标记初始化完成
    setIsAuthReady(true);
  }, []);

  useEffect(() => {
    checkIfLogged();
  }, [checkIfLogged]);

  // 未完成认证时显示加载状态
  if (!isAuthReady) {
    return <div>加载中...</div>;
  }

  return (
    <AuthContext.Provider value={{ token, isAuthenticated }}>
      {children}
    </AuthContext.Provider>
  );
};

export const useAuth = () => useContext(AuthContext);

方案二：动态创建依赖认证状态的API客户端

让ApiClient依赖AuthContext的token状态，每次请求时动态注入认证头，确保请求时token已就绪。

修改后的ApiContext代码：

import React, { createContext, useContext, useMemo } from "react";
import axios from "axios";
import { useAuth } from "../auth/AuthContext";

// 工厂函数：根据token创建带认证的API客户端
const createApiClient = (token) => ({
  getData: async () => {
    const response = await axios.get("/demo/data", {
      headers: {
        Authorization: `Bearer ${token}`,
        "Content-Type": "application/json"
      }
    });
    return response.data;
  },
});

export const ApiClientContext = createContext(null);

export const useApiClient = () => {
  return useContext(ApiClientContext);
};

export const ApiContextProvider = ({ children }) => {
  const { token } = useAuth();
  
  const apiClient = useMemo(() => {
    // token未就绪时返回带错误处理的客户端
    if (!token) {
      return {
        getData: async () => {
          throw new Error("认证未完成，请稍后重试");
        }
      };
    }
    return createApiClient(token);
  }, [token]);

  return (
    <ApiClientContext.Provider value={apiClient}>
      {children}
    </ApiClientContext.Provider>
  );
};

配套修改Home组件，仅在认证通过后发起请求：

import React, { useEffect, useState } from "react";
import { useAuth } from "../auth/AuthContext";
import { useApiClient } from "../context/ApiContext";

export const Home = () => {
  const { isAuthenticated } = useAuth();
  const apiClient = useApiClient();
  const [data, setData] = useState(null);

  useEffect(() => {
    const fetchData = async () => {
      if (isAuthenticated) {
        try {
          const result = await apiClient.getData();
          setData(result);
        } catch (err) {
          console.error(err);
        }
      }
    };
    fetchData();
  }, [isAuthenticated, apiClient]);

  if (!isAuthenticated) {
    return <div>请先完成认证</div>;
  }

  return <div>{JSON.stringify(data)}</div>;
};

方案三：使用Axios请求拦截器动态注入token

提前配置Axios请求拦截器，动态从AuthService实例中获取token，避免依赖初始化顺序。

修改后的AuthService代码：

import axios from "axios";

class AuthService {
  constructor(authRedirectUrlPrefix) {
    this.authRedirectUrlPrefix = authRedirectUrlPrefix;
    this.token = null; // 实例内存储token

    // 提前配置请求拦截器，动态添加token
    axios.interceptors.request.use(
      (config) => {
        if (this.token) {
          config.headers.Authorization = `Bearer ${this.token}`;
        }
        config.headers["Content-Type"] = "application/json";
        return config;
      },
      (error) => Promise.reject(error)
    );

    axios.interceptors.response.use(
      (response) => response,
      (error) => {
        if (error.response?.status === 401) {
          this.redirectToLogout(false);
        }
        return Promise.reject(error);
      }
    );
  }

  setAxiosDefaults(token) {
    this.token = token; // 更新实例内的token
  }

  TODOLogout() {
    this.token = null;
    // 补充注销逻辑
  }

  redirectToLogout() {
    window.location.href = `${this.authRedirectUrlPrefix}/logout`;
  }
}

export default AuthService;

内容的提问来源于stack exchange，提问作者Paul