React ProtectedRoute组件中API请求前变量提前读取问题如何解决

问题根因 #

你遇到的是典型的异步操作和React组件渲染时序不匹配问题：

• axios发送的网络请求是异步任务，会被推入事件循环等待执行，不会阻塞组件同步渲染逻辑
• 组件第一次渲染时，请求还未返回结果，此时直接读取鉴权状态拿到的都是初始值，路由判断必然出错
• 你之前尝试用useState未生效的原因是没有加「请求加载中」的中间状态，初始状态的false会导致请求还没返回就直接触发跳转逻辑，后续状态更新也无法生效。

解决方案 #

核心改动点 #

• 用useState存储两个状态：鉴权结果isAuthenticated、请求加载状态isLoading
• 加载状态为真时，返回加载占位内容，不执行路由跳转逻辑
• 请求完成后更新两个状态，触发组件重新渲染，此时再执行路由判断

修正后的完整代码如下：

import React, { useEffect, useState } from "react";
import { Redirect, Route } from "react-router-dom";
import axios from 'axios'

function ProtectedRoute({ component: Component, ...restOfProps }) {
    const [isAuthenticated, setIsAuthenticated] = useState(false);
    // 新增加载状态，初始为true表示请求进行中
    const [isLoading, setIsLoading] = useState(true);

    useEffect(() => {
        checkLoginStatus()
    }, []);
    
    const checkLoginStatus = () => {
        axios
            .get(`${process.env.REACT_APP_API_URL}/session/extend`, { withCredentials: true })
            .then(response => {
                setIsAuthenticated(true);
                console.log("logged in", response);
            })
            .catch((error) => {
                setIsAuthenticated(false);
                console.log("not logged in", error);
            })
            .finally(() => {
                // 无论请求成功失败，都标记加载完成
                setIsLoading(false);
            });
    };

    // 加载中返回占位，避免提前跳转
    if (isLoading) {
        return <div>加载中...</div>; // 也可以替换为自定义全局loading组件
    }

    return (
        <Route
            {...restOfProps}
            render={(props) =>
                isAuthenticated ? <Component {...props} /> : <Redirect to="/login" />
            }
        />
    );
}

export default ProtectedRoute;

注意事项 #

• 不要用普通var/let变量存储需要触发视图更新的状态，React只会响应useState/useReducer等状态管理API的变更触发重渲染
• 该方案只会在组件首次挂载时执行一次鉴权请求，符合常规路由鉴权的需求，如果需要定时刷新鉴权状态，可以额外加定时器逻辑

内容的提问来源于stack exchange，提问作者Mr. Hankey