React-Keycloak 不斷刷新

Question

我正在嘗試使用 keycloak 來保護 React 應用程序。 我正在使用兩個包：React-keycloak 和 keycloak-js。

這是我的密鑰斗篷提供商

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

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

這是我的 keycloak object：

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

但同時使用了新舊版本，但沒有成功。

一個類似的問題： 使用keycloak實現React時，頁面不斷刷新並更改URL中的查詢參數'state'和'session'

Answer 1

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

我正在使用 React 18.0，其中 StrictMode 導致 useEffect 被調用兩次。 這似乎是 ReactKeycloakProvider+keycloak.js 的重大變化。 解決方法是將 StrictMode 移動到 ReactKeycloakProvider 內部，而不是圍繞整個應用程序移動！