React Router v6 教程：构建认证保护的私有路由与重定向策略

// src/context/AuthContext.js
import React, { createContext, useState, useEffect, useCallback } from 'react';

export const AuthContext = createContext({
  isLoggedIn: false,
  token: null,
  login: () => {},
  logout: () => {}
});

let logoutTimer;

export const AuthProvider = (props) => {
  const [token, setToken] = useState(null);
  const [isLoggedIn, setIsLoggedIn] = useState(false);
  // 可以添加更多状态，例如用户信息、token过期时间等

  const login = useCallback((uid, token, expirationDate) => {
    setToken(token);
    setIsLoggedIn(true);
    // 存储 token 和过期时间到 localStorage
    const tokenExpirationDate = expirationDate || new Date(new Date().getTime() + 1000 * 60 * 60); // 1小时
    localStorage.setItem(
      'userData',
      JSON.stringify({
        userId: uid,
        token: token,
        expiration: tokenExpirationDate.toISOString()
      })
    );
  }, []);

  const logout = useCallback(() => {
    setToken(null);
    setIsLoggedIn(false);
    clearTimeout(logoutTimer);
    localStorage.removeItem('userData');
  }, []);

  useEffect(() => {
    if (token) {
      const storedData = JSON.parse(localStorage.getItem('userData'));
      if (storedData && storedData.token && new Date(storedData.expiration) > new Date()) {
        const remainingTime = new Date(storedData.expiration).getTime() - new Date().getTime();
        logoutTimer = setTimeout(logout, remainingTime);
      }
    }
  }, [token, logout]);

  useEffect(() => {
    const storedData = JSON.parse(localStorage.getItem('userData'));
    if (storedData && storedData.token && new Date(storedData.expiration) > new Date()) {
      login(storedData.userId, storedData.token, new Date(storedData.expiration));
    }
  }, [login]);

  return (
    <AuthContext.Provider
      value={{
        isLoggedIn: !!token, // 根据 token 判断是否登录
        token: token,
        login: login,
        logout: logout
      }}
    >
      {props.children}
    </AuthContext.Provider>
  );
};

// src/components/PrivateRoute.js
import React, { useContext } from 'react';
import { Navigate } from 'react-router-dom';
import { AuthContext } from '../context/AuthContext'; // 引入认证上下文

const PrivateRoute = ({ children }) => {
  const auth = useContext(AuthContext);

  if (!auth.isLoggedIn) {
    // 如果用户未登录，则重定向到 /login 页面
    // replace 属性确保重定向后，用户无法通过浏览器回退按钮返回到受保护页面
    return <Navigate to="/login" replace />;
  }

  // 如果用户已登录，则渲染子组件（即受保护的页面）
  return children;
};

export default PrivateRoute;

// src/App.js
import React, { useState, useCallback } from 'react';
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import { AuthProvider, AuthContext } from './context/AuthContext';
import PrivateRoute from './components/PrivateRoute';

// 假设这些是你的页面组件
import HomePage from './pages/HomePage';
import LoginPage from './pages/LoginPage';
import DashboardPage from './pages/DashboardPage';
import ProfilePage from './pages/ProfilePage';
import NotFoundPage from './pages/NotFoundPage'; // 404 页面

const App = () => {
  return (
    // AuthProvider 应该包裹在 Router 外部，以便所有路由和组件都能访问认证上下文
    <AuthProvider>
      <Router>
        <div className="App">
          {/* 这里可以放置全局导航栏或其他布局组件 */}
          <Routes>
            {/* 公共路由，无需认证即可访问 */}
            <Route path="/" element={<HomePage />} />
            <Route path="/login" element={<LoginPage />} />

            {/* 私有路由，需要认证才能访问 */}
            <Route
              path="/dashboard"
              element={
                <PrivateRoute>
                  <DashboardPage />
                </PrivateRoute>
              }
            />
            <Route
              path="/profile"
              element={
                <PrivateRoute>
                  <ProfilePage />
                </PrivateRoute>
              }
            />

            {/* 匹配所有未定义路由的 404 页面 */}
            <Route path="*" element={<NotFoundPage />} />
          </Routes>
        </div>
      </Router>
    </AuthProvider>
  );
};

export default App;