如何使用 React v18 和 React Router Dom v6.11 来保护 React 路由

Question

App.js

import { useKeycloak } from "@react-keycloak/web"

  const { initialized } = useKeycloak()
  if (!initialized) {
    return <h3>Loading ... !!!</h3>
  }
  return (
    <>
      <BrowserRouter>
        <Routes>
          <Route path="/" element={<LandingPage />} />
          <Route path="/secure" element={<TestCompoent />} /> //How to secure this component
        </Routes>
      </BrowserRouter>
    </>
  )
}

测试组件.tsx

function TestCompoent() {
  return <div>Private</div>
}

export default TestCompoent

如何创建一个组件

PrivateRoute

，检查用户是否已登录，否则导航到 keycloak 登录

Answer 1

不幸的是，您无法完全保护网络界面上的某些内容，但您可以限制对私人链接的访问！例如： 您可以为私人链接创建包装器：

<Route element={<RequireAuthRoute />}>
 <Route path="trainer" element={<TrainerComponent />} />
 <Route path="admin" element={<AdminComponent />} />
</Route>

和包装纸。在此包装中，您可以检查用户是否有效、经过身份验证或其他检查：

import { useLocation, Outlet, Navigate } from "react-router-dom";
import { useSelector } from "react-redux";
import { authStatusSelector } from "../redux/features/auth/auth.slice";
import { FETCH_STATUS } from "../redux/types";

const RequireAuthRoute = () => {
  const location = useLocation();
  const status = useSelector(authStatusSelector);

  if (status !== FETCH_STATUS.AUTHENTICATED) {
    return <Navigate to="/main" state={{ from: location }} />;
  }

  return <Outlet />;
}

export default RequireAuthRoute;

Answer 2

function TestCompoent({children}) {

if (isLogged) {
  return children;
} else {
  return <h3>Loading ... !!!</h3>
}

export default TestCompoent;

App.js

return (
    <>
      <BrowserRouter>
        <Routes>
          <Route path="/" element={<LandingPage />} />
          <Route path="/secure" element={<TestCompoent>your component here</TestCompoent>} /> //How to secure this component
        </Routes>
      </BrowserRouter>
    </>
  )

说明： 这里

TestComponent

是PrivateRoute，它检查用户是否登录。您可以将

isLogged

verable 替换为检查用户登录的条件。如果用户未登录，它将返回

Loading...

（您可以在其中返回您想要在用户未登录时导航用户的组件。）

如果用户已经登录，那么将返回

children

，这是组件。

在

App.js

中你可以看到：

<TestCompoent>your component here</TestCompoent>

your component here you can put your secure component

，由

TestComponent

包裹 [您用

TestComponent

包裹的所有内容都将在 TestCompoment 中显示为

children

]。

您只需要使用

TestComponent

包装器来包装您的安全组件:)