javascript - React 应用程序中登录页面的路由保护

Question

我正在尝试保护我的 React 应用程序中的路由。 Home 页面受到保护，但我还想在 isLoggedIn 为 true 时阻止用户返回登录页面，如果为 false 则他可以无法访问主页，并将被重定向到登录页面。 这是我编写的 PrivateRoutes 来保护正在保护家庭的路由，但用户仍然可以访问 Login 页面，我该如何阻止它？

PrivateRoutes.jsx:

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

const PrivateRoutes = () => {
  const isLoggedIn = true;
  return isLoggedIn ? <Outlet /> : <Navigate to="/login" />;
};

export default PrivateRoutes;

这是 App.jsx:

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";

function App() {
  return (
    <>
      <BrowserRouter>
        <Routes>
          <Route element={<PrivateRoutes />}>
            <Route index element={<Home />} path="/" exact />
          </Route>
          <Route path="/login" element={<Login />} />
        </Routes>
      </BrowserRouter>
    </>
  );
}

export default App;

Answer 1

如果您想阻止对 "/login" 路由进行身份验证访问，那么您还可以在与私有(private)路由类似的条件下保护该路由。创建另一个布局路由组件，该组件应用 PrivateRoute 组件的相反条件，例如它会重定向已经过身份验证的用户。

示例:

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

const PrivateRoute = () => {
  const isLoggedIn = true;
  return isLoggedIn 
    ? <Outlet />
    : <Navigate to="/login" replace />;
};

export default PrivateRoute;

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

const AnonymousRoute = () => {
  const isLoggedIn = true;
  return isLoggedIn 
    ? <Navigate to="/" replace />
    : <Outlet />;
};

export default AnonymousRoute;

import { BrowserRouter, Route, Routes } from "react-router-dom";
import Login from "./pages/Login";
import SignUp from "./pages/SignUp";
import Home from "./pages/Home";
import PrivateRoute from "./utils/PrivateRoute";
import AnonymousRoute from "./utils/AnonymousRoute";

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route element={<PrivateRoute />}>
          <Route path="/" element={<Home />} />
        </Route>
        <Route element={<AnonymousRoute />}>
          <Route path="/login" element={<Login />} />
        </Route>
      </Routes>
    </BrowserRouter>
  );
}

export default App;