如何在ReactJS中保护Secure组件，实现未登录重定向至Login页面？

要解决未登录可直接访问Secure页面的问题，你可以通过路由守卫（私有路由）结合登录状态管理来实现，以下是具体步骤和代码示例：

1. 管理全局登录状态 #

首先需要在全局维护登录状态，推荐用React Context实现，这样所有组件都能方便访问和更新状态，同时结合localStorage做持久化，避免页面刷新后状态丢失：

import { createContext, useContext, useState, useEffect } from 'react';

// 创建认证上下文
const AuthContext = createContext();

// 认证提供者组件，包裹整个应用
export function AuthProvider({ children }) {
  const [isLoggedIn, setIsLoggedIn] = useState(false);

  // 页面加载时从localStorage恢复登录状态
  useEffect(() => {
    const savedLoginState = localStorage.getItem('isLoggedIn') === 'true';
    setIsLoggedIn(savedLoginState);
  }, []);

  // 登录成功后调用，更新状态并持久化
  const login = () => {
    setIsLoggedIn(true);
    localStorage.setItem('isLoggedIn', 'true');
  };

  // 登出时调用，清除状态和本地存储
  const logout = () => {
    setIsLoggedIn(false);
    localStorage.removeItem('isLoggedIn');
  };

  return (
    <AuthContext.Provider value={{ isLoggedIn, login, logout }}>
      {children}
    </AuthContext.Provider>
  );
}

// 自定义Hook，简化上下文调用
export function useAuth() {
  return useContext(AuthContext);
}

2. 创建私有路由组件 #

基于react-router-dom v6版本，创建一个PrivateRoute组件，用来判断用户是否登录：

import { Navigate, Outlet } from 'react-router-dom';
import { useAuth } from './AuthContext';

export function PrivateRoute() {
  const { isLoggedIn } = useAuth();

  // 已登录则渲染受保护的页面（Outlet对应子路由内容），否则重定向到登录页
  return isLoggedIn ? <Outlet /> : <Navigate to="/login" replace />;
}

3. 配置路由规则 #

在根组件中用AuthProvider包裹整个应用，并配置路由，把需要保护的Secure页面放在PrivateRoute下：

import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import { AuthProvider } from './AuthContext';
import Login from './Login';
import Secure from './Secure';
import { PrivateRoute } from './PrivateRoute';

function App() {
  return (
    <AuthProvider>
      <Router>
        <Routes>
          {/* 登录页面，无需保护 */}
          <Route path="/login" element={<Login />} />
          {/* 私有路由组，所有子路由都需要登录才能访问 */}
          <Route element={<PrivateRoute />}>
            <Route path="/secure" element={<Secure />} />
          </Route>
          {/* 其他未匹配的路由，默认重定向到登录页 */}
          <Route path="*" element={<Navigate to="/login" replace />} />
        </Routes>
      </Router>
    </AuthProvider>
  );
}

export default App;

4. 在Login组件中更新登录状态 #

登录成功后调用login方法更新全局状态，再导航到Secure页面：

import { FacebookLogin } from '@greatsumini/react-facebook-login';
import { useAuth } from './AuthContext';
import { useNavigate } from 'react-router-dom';

function Login() {
  const { login } = useAuth();
  const navigate = useNavigate();

  const handleLoginSuccess = (response) => {
    // 这里可以处理Facebook返回的用户信息，比如存到上下文或本地存储
    console.log('登录成功:', response);
    // 更新登录状态
    login();
    // 跳转到安全页面
    navigate('/secure');
  };

  const handleLoginFailure = (error) => {
    console.error('登录失败:', error);
  };

  return (
    <div className="login-page">
      <h2>请登录</h2>
      <FacebookLogin
        appId="你的Facebook应用ID"
        onSuccess={handleLoginSuccess}
        onFailure={handleLoginFailure}
      />
    </div>
  );
}

export default Login;

补充说明 #

• 如果你的react-router-dom是v5版本，私有路由的写法会略有不同，需要用Route的render或children属性来判断；
• 若不需要复杂的全局状态，也可以直接在PrivateRoute里读取localStorage判断登录状态，但用Context更便于后续扩展登出、用户信息管理等功能。

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