页面保持刷新和更改查询参数＆＃x27; state＆＃x27;和会议＆＃x27;在与KeyCloak进行反应时在URL中

Question

初始化领域，用户和客户端后，我正在尝试与KeyCloak进行React。 每次我启动我的React项目时，它都会不断刷新，并改变

Ex：

http：// localhost：3000/＃state = f9fe4446d-358e-4206-4206-811f-fe05f37a8981 4850-a285-2e139fe5c204&code=fe3ca9e6-37f1-41e8-91be-c2502e86b071.5b741a8e-28d2-4850-a285-2e139fe5c204.10d54989-1e8a-486b-b33b-4a164f9f84ab

after one second later:

http ：// localhost：3000/＃state = 37E5D6E-18E0-4578-89CC-01CA41F397C9＆amp; session_state = 5B741A8E-28E-28E-28D2-4850-A2850-A285-2E139FE5C2E2FE5C204＆AMP; AMP; AMP; AMP; COPED-32BEED-32BEED-32B9-42B9-2B9-42-42-42-42-42-42 5B741A8E-28D2-4850- A285-2E139FE5C204.10D54989-1E8A-486B-B33B-4A164F9F84AB

app.js

 <div>
  <ReactKeycloakProvider authClient={keycloak}>
    <Nav />
    <BrowserRouter>
      <Routes>
        <Route exact path="/" element={<WelcomePage />} />
        <Route path="/secured" element={<SecuredPage />} />
      </Routes>
    </BrowserRouter>
  </ReactKeycloakProvider>
</div>

有担保页面：

<div>
  <ReactKeycloakProvider authClient={keycloak}>
    <Nav />
    <BrowserRouter>
      <Routes>
        <Route exact path="/" element={<WelcomePage />} />
        <Route
          path="/secured"
          element={
            <PrivateRoute>
              <SecuredPage />
            </PrivateRoute>
          }
        />
      </Routes>
    </BrowserRouter>
  </ReactKeycloakProvider>
</div>

私有路由

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

const PrivateRoute = ({ children }) => {
  const { keycloak } = useKeycloak();

  console.log(keycloak);

  const isLoggedIn = keycloak.authenticated;

  return isLoggedIn ? children : null;
};

export default PrivateRoute;

keycloak文件：

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

keycloak中的领域的配置

keycloak中的用户配置

“ https://i.sstatic.net/jnr0k.png” rel =“ nofollow noreferrer”> keycloak中的客户端的配置

Answer 1

React-Keycloak于2023年4月4日在GitHub存档。

我建议切换到 react-od-odc-context ： https://github.com/authts/react-oidc-context ，它是积极维护和更一般性的（不仅是针对KeyCloak，而是对于任何OIDC提供商，所以也是如此不取决于 keycloak-js ）。

有一个官方和最新的全栈演示，可与KeyCloak集成： https://github.com/authts/sample-keycloak-reakct-codc-context 。

Answer 2

我在vue.js也有类似的问题。对我来说，我发现这是由创建的iframe引起的，该iframe是为了观察当前的会话状态和缺少samesite属性的第三方烹饪。可以通过传递 CheckLogInifRame：false 作为 init 函数的选项来禁用iframe。阻止页面重新加载是一种解决方法。并不是真正的修复，因为您失去了获得状态的功能。

这已经在这里回答： keyCloak：session cookie在令牌请求中丢失了带有新的Chrome Samesite/Secure Cookie/Secure Cookie

由于我首先找到了您的问题，因此我决定回答。

这是有关状态iframe和现代浏览器中问题的KeyCloak文档的链接：

Answer 3

我认为您可能使用＆lt; react.strictmode＆gt; 在某些组件中 ＆lt; reactKeycloakprovider＆gt; ，最有可能在您的React应用程序。例如，

root.render(
  <React.StrictMode>
    <BrowserRouter>
      <App />
    </BrowserRouter>
  </React.StrictMode>,
)

修复程序（现在）是移动＆lt; strictmode＆gt; ＆lt; reactKeyCloakProvider＆gt; 。

注意：这适用于使用 keycloak-js 的任何React应用程序，而不仅仅是使用＆lt; reactKeyCloakProvider＆gt; 的应用程序。

注意：此问题与非常类似的问题分开，一个@micha的答案是寻址。

另请参见这篇文章，其中讨论了＆lt; strictmode＆gt; 问题： react-keycloak'>保持清爽