React-Keycloak 不断刷新答案

【问题标题】：React-Keycloak keeps refreshingReact-Keycloak 不断刷新
【发布时间】：2023-01-27 17:45:34
【问题描述】：

我正在尝试使用 keycloak 来保护 React 应用程序。我正在使用两个包：React-keycloak 和 keycloak-js。

这是我的密钥斗篷提供商

    <ReactKeycloakProvider
      authClient={keycloak}
      onEvent={eventLogger}
      onTokens={tokenLogger}

    >
      <Foo></Foo>
    </ReactKeycloakProvider>

这是我的 keycloak 对象：

const keycloak = new Keycloak({
  url: "http://XXX.XXX.XXX.XXX:8080",
  realm: "testrealm",
  clientId: "testclient",
});

如果我没有登录 cookie，我将被定向到 Keycloak 登录页面。然后我可以登录并返回到我的应用程序。现在页面不断刷新，因为它试图调用这样的 url：

http://localhost:3000/#state=6b9c8273-3e7a-46d8-81e6-89d83a539d81&session_state=cb1b6069-b99a-4346-b0bf-6ea37e80900c&code=2b1ce5bb-ec49-4c1e-942e-9b70c74c36ee.cb1b6069-b99a-4346-b0bf-6ea37e80900c.d8e66d53-2283-4ead-b4f4-c11ddd5aa2a6

我尝试了不同的初始化选项，包括：

initOptions={{ onLoad: "login-required"}}
initOptions={{ checkLoginIframe: false }}

但似乎没有任何效果。

我发现没有比这更有效的例子了，所以我不确定这是不是一个错误，我是否缺少一些配置，或者其他什么。

我目前使用的版本： @react-keycloak/web@3.4.0 keycloak-js@19.0.1

但同时使用了新旧版本，但没有成功。

一个类似的问题： Page keeps refreshing and changing the query parameter 'state' and 'session' in URL when implementing React with keycloak

【问题讨论】：

标签： reactjs typescript keycloak keycloak-js

【解决方案1】：

更新： https://github.com/react-keycloak/react-keycloak/issues/182

我正在使用 React 18.0，其中 StrictMode 导致 useEffect 被调用两次。这似乎是 ReactKeycloakProvider+keycloak.js 的重大变化。解决方法是将 StrictMode 移动到 ReactKeycloakProvider 内部，而不是围绕整个应用程序移动！

【讨论】：