React Context异步状态管理与路由保护：确保组件获取最新认证值

import React, { useState, useEffect } from 'react';
import { BrowserRouter, Routes, Route, Navigate } from 'react-router-dom';
import { authContext } from './authContext'; // 确保路径正确
import Nav from './nav';
import Home from './Home'; // 假设你有一个Home组件
import Dashboard from './Dashboard'; // 假设你有一个Dashboard组件

// ProtectedDashboardRoute.js (需要调整以接收Component prop)
function ProtectedDashboardRoute({ Component }) {
    const value = React.useContext(authContext);
    console.log("is Auth in ProtectedDashboardRoute:", value);

    // 在这里处理'loading'状态，但主要逻辑已在App.js中处理
    // 如果App.js确保了在非'loading'状态才渲染BrowserRouter，
    // 那么这里收到的value将是'auth'或'not'。
    return value === "auth" ? Component : <Navigate to="/" />;
}

function App() {
    const [useLogedin, setState] = useState("loading"); // 初始状态设为'loading'

    useEffect(() => {
        async function getAuth() {
            try {
                const response = await fetch("http://localhost:3001/isAuth");
                const data = await response.json();
                const auth = data.body.isAuth;

                if (auth === "true") {
                    setState("auth");
                } else if (auth === "false") {
                    setState("not");
                }
            } catch (error) {
                console.error("Failed to fetch auth status:", error);
                setState("not"); // 认证请求失败也视为未认证
            }
        }

        getAuth();
    }, []); // 确保useEffect只运行一次

    return (
        <authContext.Provider value={useLogedin}>
            {useLogedin === "loading" ? (
                <div>Loading authentication...</div> // 显示加载指示器
            ) : (
                <>
                    <Nav />
                    <BrowserRouter>
                        <Routes>
                            <Route path='/' element={<Home />} />
                            {/* 将Dashboard作为Component prop传递 */}
                            <Route path='/dashboard' element={<ProtectedDashboardRoute Component={<Dashboard />} />} />
                        </Routes>
                    </BrowserRouter>
                </>
            )}
        </authContext.Provider>
    );
}

export default App;

import React from 'react';
import { Navigate } from 'react-router-dom';
import { authContext } from './authContext';
import Dashboard from './Dashboard'; // 确保Dashboard组件已导入

export default function ProtectedDashboardRoute({ Component }) {
    const value = React.useContext(authContext);
    console.log("is Auth in ProtectedDashboardRoute:", value); // 此时value将是'auth'或'not'

    // 因为App.js已经处理了'loading'状态，这里可以直接根据'auth'或'not'进行判断
    return value === "auth" ? Component : <Navigate to="/" />;
}