React路由鉴权失效：state状态未更新问题求助

问题核心 #

你的代码存在两个关键问题：

• 初始状态直接触发跳转：组件挂载时ok初始值为false，此时异步请求还未完成，组件直接返回<Navigate to="/login" />，即使后续请求成功将ok设为true，也无法阻止初始的跳转行为。
• 缺少加载状态处理：没有在请求过程中做状态兜底，导致未完成验证就直接判断权限，触发错误跳转。

修复后的代码 #

import axios from 'axios';
import { useState, useEffect } from 'react';
import { Outlet, Navigate } from 'react-router-dom';

function RequireAuth() {
    const [ok, setOk] = useState(null); // 初始设为null标记验证未完成
    const fetchUser = async () => {
        try {
            const { data } = await axios.get('http://localhost:5555/api/current-user', {
                withCredentials: true,
                credentials: 'include',
            });
            setOk(data.ok);
        } catch (err) {
            console.log(err);
            setOk(false);
        }
    };

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

    // 验证未完成时返回加载状态，避免提前跳转
    if (ok === null) {
        return <div>验证中...</div>; // 可替换为自定义加载组件
    }

    return ok ? <Outlet /> : <Navigate to="/login" />;
}

export default RequireAuth;

关键修改说明 #

• 把ok的初始值改为null，用来区分「未验证」「验证通过」「验证失败」三种状态
• 增加验证未完成的分支，返回加载提示，避免初始状态直接触发跳转
• 异常捕获中明确设置ok为false，确保错误场景下也能正确跳转登录页

修改后组件会等待异步请求完成后再判断权限，不会再出现初始状态误跳转的问题。

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