我刚刚登录 keycloak auth pag 后，Keycloak 会导致反应应用程序出现循环。登录后重定向时无限循环

Question

我正在@react-keycloak/web使用 keycloak 来保护 React 应用程序。我最近开始将 KeyCloak 与 React 结合使用。我的 KeyCloak Docker 在端口 8080 上运行，我的 React 应用程序在端口 3000 上运行。

当我尝试登录时，地址栏开始跳转，并且 url 中出现一些不同的标记。

应用程序.js

import React from "react";
import { ReactKeycloakProvider } from "@react-keycloak/web";
import keycloak from "./Keycloak"
import { BrowserRouter, Route, Routes } from "react-router-dom";
import Nav from "./components/Nav";
import WelcomePage from "./pages/Homepage";
import SecuredPage from "./pages/Securedpage";
import PrivateRoute from "./helpers/PrivateRoute";

function App() {
 return (
   <div>
     <ReactKeycloakProvider authClient={keycloak}>
       <Nav />
       <BrowserRouter>
         <Routes>
           <Route exact path="/" element={<WelcomePage />} />
           <Route path="/secured" element={<PrivateRoute>
                                            <SecuredPage />
                                          </PrivateRoute>} />
         </Routes>
       </BrowserRouter>
       </ReactKeycloakProvider>
   </div>
 );
}
export default App;

导航js

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

const Nav = () => {
 const { keycloak, initialized } = useKeycloak();

 return (
   <div>
     <div className="top-0 w-full flex flex-wrap">
       <section className="x-auto">
         <nav className="flex justify-between bg-gray-200 text-blue-800 w-screen">
           <div className="px-5 xl:px-12 py-6 flex w-full items-center">
             <h1 className="text-3xl font-bold font-heading">
               Keycloak React AUTH.
             </h1>
             <ul className="hidden md:flex px-4 mx-auto font-semibold font-heading space-x-12">
               <li>
                 <a className="hover:text-blue-800" href="/">
                   Home
                 </a>
               </li>
               <li>
                 <a className="hover:text-blue-800" href="/secured">
                   Secured Page
                 </a>
               </li>
             </ul>
             <div className="hidden xl:flex items-center space-x-5">
               <div className="hover:text-gray-200">
                 {!keycloak.authenticated && (
                   <button
                     type="button"
                     className="text-blue-800"
                     onClick={() => keycloak.login()}
                   >
                     Login
                   </button>
                 )}

                 {!!keycloak.authenticated && (
                   <button
                     type="button"
                     className="text-blue-800"
                     onClick={() => keycloak.logout()}
                   >
                     Logout ({keycloak.tokenParsed.preferred_username})
                   </button>
                 )}
               </div>
             </div>
           </div>
         </nav>
       </section>
     </div>
   </div>
 );
};

export default Nav;

Keycloak.js

import Keycloak from "keycloak-js";
const keycloak = new Keycloak({
 url: "http://localhost:8080/auth",
 realm: "keycloak-react-auth",
 clientId: "React-auth",
});

export default keycloak;

Answer 1

我认为您面临的问题在这里讨论和回答：https://github.com/react-keycloak/react-keycloak/issues/93

<React.StrictMode>现在从index.js 中删除应该可以修复它。如果您希望保留严格模式，请将 StrictMode 放入 内ReactKeycloakProvider。

Answer 2

删除<React.StrictMode>并不能解决问题。

该问题与 React-keycloak 如何验证颁发的令牌尚未被撤销有关。为此，React-keycloak 尝试加载并验证被大多数现代浏览器阻止的特定 i-frame。

要解决该问题，您有两种选择：

• 使用 onLoad: "check-sso" ,silentCheckSsoRedirectUri: window.location.origin + "/silent-check-sso.html",
• 使用 checkLoginIframe:false （虽然这个选项更激进） App.js 中的代码如下所示：

   

     import React from "react";
        import { ReactKeycloakProvider } from "@react-keycloak/web";
        import keycloak from "./Keycloak"
        import { BrowserRouter, Route, Routes } from "react-router-dom";
        import Nav from "./components/Nav";
        import WelcomePage from "./pages/Homepage";
        import SecuredPage from "./pages/Securedpage";
        import PrivateRoute from "./helpers/PrivateRoute";
    
        function App() {
         return (
           <div>
             <ReactKeycloakProvider authClient={keycloak} initOptions={{
          checkLoginIframe: false,
            }}>
           <Nav />
               <BrowserRouter>
             <Routes>
               <Route exact path="/" element={<WelcomePage />} />
               <Route path="/secured" element={<PrivateRoute>
                                                <SecuredPage />
                                              </PrivateRoute>} />
             </Routes>
           </BrowserRouter>
           </ReactKeycloakProvider>
       </div>
     );
    }
    export default App;

这将使您的身份验证适用于所有浏览器。