与keycloak js适配器和react-keycloak绑定反应导致无限循环

Question

所以我刚刚创建了一个新的 React 项目，我在其中使用带有 react-keycloak/web 依赖项的官方 keycloak-js 适配器来进行反应绑定。我遵循了所有“官方”的做事方式，我有这个：

keycloak.js（配置）：

import Keycloak from "keycloak-js";

// Setup Keycloak instance as needed
const keycloak = new Keycloak({
    realm: "SomeRealm",
    url: process.env.REACT_APP_KEYCLOAK_URL + "/auth/",
    clientId: "app-id",
});

export default keycloak;

索引文件如下所示：

// Keycloak
import { ReactKeycloakProvider } from "@react-keycloak/web";
import keycloak from "./keycloak";

const keycloakProviderInitConfig = {
  onLoad: "login-required",
};

ReactDOM.render(
  <ReactKeycloakProvider
    authClient={keycloak}
    initOptions={keycloakProviderInitConfig}
  >
    <React.StrictMode>
      <ChakraProvider>
        <App />
      </ChakraProvider>
    </React.StrictMode>
  </ReactKeycloakProvider>,
  document.getElementById("root")
);

因此，如果用户未通过身份验证，此“应该”将用户重定向到登录，而是呈现页面外的内容。因此，我尝试了另一种实现方式，即使用此代码段有条件地显示内容：

useEffect(() => {
    if (!keycloak.authenticated) {
      keycloak.login();
    }
  }, [keycloak]);

  return keycloak.authenticated ? (
    <>
      <Navbar />
      <SomeContent />
    </>
  ) : null;

但如果用户通过身份验证，这将导致无限循环。

任何帮助将不胜感激:)

版本：

"@react-keycloak/web": "^3.4.0",
"keycloak-js": "^12.0.3"

Answer 1

愚蠢的我，问题是我使用的keycloak服务器与react-keycloak和keycloak-js的版本不匹配

与keycloak js适配器和react-keycloak绑定反应导致无限循环

React with keycloak js adapter and react-keycloak binding resulting in an endless loop

javascript

reactjs

keycloak