React Context与异步状态管理：解决认证数据更新延迟问题

// authContext.js
import React from 'react';
const authContext = React.createContext();
export { authContext };

// App.js (部分代码)
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';
import Dashboard from './Dashboard';
import ProtectedDashboardRoute from './ProtectedDashboardRoute';

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

    useEffect(() => {
        async function getAuth() {
            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");
            }
        }
        getAuth();
    }, []); // 确保只运行一次

    return (
        <authContext.Provider value={useLogedin}>
            <Nav />
            <BrowserRouter>
                <Routes>
                    <Route path='/' element={<Home />} />
                    <Route path='/dashboard' element={<ProtectedDashboardRoute Component={<Dashboard />} />} />
                </Routes>
            </BrowserRouter>
        </authContext.Provider>
    );
}
export default App;

// ProtectedDashboardRoute.js
import React, { useContext } from 'react';
import { Navigate } from 'react-router-dom';
import { authContext } from './authContext';
import Dashboard from './Dashboard';

export default function ProtectedDashboardRoute({ Component }) {
    const value = useContext(authContext);
    console.log("is Auth in ProtectedDashboardRoute:", value); // 观察这里的输出

    return value === "auth" ? Component : <Navigate to="/" />;
}

// Nav.js
import React, { useContext } from 'react';
import { authContext } from './authContext';

export default function Nav() {
    const isAuth = useContext(authContext);
    console.log("is Auth in Nav:", isAuth); // 观察这里的输出
    return (
        <header>
            {isAuth === "auth" ? <a>Logout</a> : <a href="/login">Login</a>}
        </header>
    );
}

// App.js (修改后)
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';
import Dashboard from './Dashboard';
import ProtectedDashboardRoute from './ProtectedDashboardRoute';

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

    useEffect(() => {
        async function getAuth() {
            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");
            }
        }
        getAuth();
    }, []); // 确保只运行一次

    return (
        <authContext.Provider value={useLogedin}>
            {/* 只有当useLogedin不处于"loading"状态时，才渲染Nav和BrowserRouter */}
            {useLogedin !== "loading" ? (
                <>
                    <Nav />
                    <BrowserRouter>
                        <Routes>
                            <Route path='/' element={<Home />} />
                            <Route path='/dashboard' element={<ProtectedDashboardRoute Component={<Dashboard />} />} />
                        </Routes>
                    </BrowserRouter>
                </>
            ) : (
                // 在加载期间可以显示一个加载指示器
                <div>Loading authentication...</div> 
            )}
        </authContext.Provider>
    );
}
export default App;