React应用登录页面路由保护问题：已登录用户仍可访问登录页

解决方案思路 #

我们需要实现两种路由权限控制：

1. 私有路由：仅允许已登录用户访问（如首页），未登录用户自动跳转至登录页
2. 公开路由：仅允许未登录用户访问（如登录页），已登录用户自动跳转至首页

代码修改步骤 #

1. 创建公开路由组件（PublicRoute.jsx） #

在utils目录下新增PublicRoute.jsx，用于限制已登录用户访问登录、注册等公开页面：

import { Outlet, Navigate } from "react-router-dom";

const PublicRoute = () => {
  // 实际项目中请替换为真实登录状态获取逻辑，比如从localStorage/Context/Redux读取
  const isLoggedIn = localStorage.getItem('isLoggedIn') === 'true';
  
  // 已登录用户访问公开页面时，自动跳转到首页
  return isLoggedIn ? <Navigate to="/" /> : <Outlet />;
};

export default PublicRoute;

2. 调整私有路由组件（PrivateRoutes.jsx） #

更新PrivateRoutes.jsx，确保从真实来源获取登录状态：

import { Outlet, Navigate } from "react-router-dom";

const PrivateRoutes = () => {
  // 替换为真实的登录状态获取逻辑
  const isLoggedIn = localStorage.getItem('isLoggedIn') === 'true';
  
  // 未登录用户访问私有页面时，自动跳转到登录页
  return isLoggedIn ? <Outlet /> : <Navigate to="/login" />;
};

export default PrivateRoutes;

3. 重构App.jsx的路由配置 #

将登录页路由嵌套到PublicRoute中，首页路由保持在PrivateRoutes中：

import { BrowserRouter, Route, Routes } from "react-router-dom";
import Login from "./pages/Login";
import SignUp from "./pages/SignUp";
import Home from "./pages/Home";
import PrivateRoutes from "./utils/PrivateRoutes";
import PublicRoute from "./utils/PublicRoute"; // 引入公开路由组件

function App() {
  return (
    <BrowserRouter>
      <Routes>
        {/* 私有路由：仅已登录用户可访问 */}
        <Route element={<PrivateRoutes />}>
          <Route path="/" element={<Home />} />
        </Route>

        {/* 公开路由：仅未登录用户可访问 */}
        <Route element={<PublicRoute />}>
          <Route path="/login" element={<Login />} />
          <Route path="/signup" element={<SignUp />} />
        </Route>
      </Routes>
    </BrowserRouter>
  );
}

export default App;

补充说明 #

• 不要硬编码isLoggedIn的值，实际项目中可以通过以下方式维护登录状态：
  • 登录成功后在localStorage中设置标识：localStorage.setItem('isLoggedIn', 'true')，登出时移除该标识
  • 使用React Context或Redux全局管理用户登录状态，实现跨组件状态共享
• 这种路由分层的方式将权限控制逻辑集中在路由组件中，避免在页面组件中重复编写判断代码，让代码结构更整洁易维护

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