深入理解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组件存在
import ProtectedDashboardRoute from './ProtectedDashboardRoute';

function App() {
    // 初始状态设置为"loading"
    const [useLogedin, setState] = useState("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();
    // 空依赖数组确保只在组件挂载时执行一次
    }, []); 

  return (
   <>
    <authContext.Provider value= {useLogedin} >
      {/* 只有当认证状态不再是"loading"时，才渲染Nav和BrowserRouter */}
      {useLogedin !== "loading" ? (
        <>
          <Nav />
          <BrowserRouter>
            <Routes>
              <Route path='/' element={<Home />} />
              {/* ProtectedDashboardRoute将接收到最终的认证状态 */}
              <Route 
                path='/dashboard' 
                element={<ProtectedDashboardRoute Component={<Dashboard/>} />}
              />
            </Routes>
          </BrowserRouter>
        </>
      ) : (
        // 在加载期间可以显示一个加载指示器
        <div>Loading authentication status...</div>
      )}
    </authContext.Provider>
   </>
  );
}

export default App;

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

export default function ProtectedDashboardRoute({ Component }) {
    const value = useContext(authContext);
    console.log("is Auth in ProtectedDashboardRoute: ", value);

    // 如果App组件已经确保了value不会是"loading"，那么这里的判断就非常可靠
    return value === "auth" ? Component : <Navigate to="/" replace />;
}

import React, { useContext } from 'react';
import { authContext } from './authContext';
// 假设Header, Logo, Span, Login等是样式组件或普通HTML元素
// import { Header, Logo, Span, Login } from './styledComponents'; 

export default function Nav(){
    const isAuth = useContext(authContext);
    return(
        <header> {/* 使用header标签代替自定义Header组件 */}
            <div><span>GREEN</span> ENERGY HOME</div> {/* 使用div和span代替自定义Logo和Span组件 */}
            {isAuth === "auth" ? 
                <a href="#">Logout</a> : 
                <a href="https://my_domain/login?response_type=code&client_id=7eek42g0k9l5v2sdt6r49ogup3&redirect_uri=http://localhost:3001/auth" >Login</a>
            }
        </header>
    );
}