如何用React v18和React Router Dom v6.11保护路由并创建PrivateRoute组件

1. 创建PrivateRoute组件 #

这个组件会检查Keycloak的初始化状态和用户登录状态，未登录时自动跳转到Keycloak登录页面，登录完成后返回原路由。

import { useKeycloak } from "@react-keycloak/web";
import { Outlet } from "react-router-dom";

const PrivateRoute = () => {
  const { initialized, authenticated, login } = useKeycloak();

  // 等待Keycloak初始化完成
  if (!initialized) {
    return <h3>Loading ... !!!</h3>;
  }

  // 未登录则触发Keycloak登录，登录后返回当前页面
  if (!authenticated) {
    login({ redirectUri: window.location.href });
    return <h3>Redirecting to login...</h3>;
  }

  // 已登录则渲染受保护的子组件
  return <Outlet />;
};

export default PrivateRoute;

2. 修改App.js的路由配置 #

用PrivateRoute包裹需要保护的路由，这里采用React Router v6的嵌套路由写法：

import { useKeycloak } from "@react-keycloak/web";
import { BrowserRouter, Routes, Route } from "react-router-dom";
import LandingPage from "./LandingPage";
import TestComponent from "./TestComponent"; // 修正原代码中的拼写错误（TestCompoent → TestComponent）
import PrivateRoute from "./PrivateRoute";

function App() {
  const { initialized } = useKeycloak();

  if (!initialized) {
    return <h3>Loading ... !!!</h3>;
  }

  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<LandingPage />} />
        {/* 用PrivateRoute保护/secure路由 */}
        <Route element={<PrivateRoute />}>
          <Route path="/secure" element={<TestComponent />} />
        </Route>
      </Routes>
    </BrowserRouter>
  );
}

export default App;

可选写法：直接包裹组件的PrivateRoute #

如果习惯更直观的包裹式写法，也可以这样定义PrivateRoute：

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

const PrivateRoute = ({ children }) => {
  const { initialized, authenticated, login } = useKeycloak();

  if (!initialized) {
    return <h3>Loading ... !!!</h3>;
  }

  if (!authenticated) {
    login({ redirectUri: window.location.href });
    return <h3>Redirecting to login...</h3>;
  }

  return children;
};

export default PrivateRoute;

对应的App.js路由写法：

<Route path="/secure" element={<PrivateRoute><TestComponent /></PrivateRoute>} />

关键说明 #

• 依赖useKeycloak提供的authenticated状态判断用户登录情况
• 调用login方法时传入redirectUri，确保用户登录后回到当前受保护的页面
• 必须等待initialized状态为true再执行判断逻辑，避免Keycloak未完成初始化时出现异常

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