我正在尝试使用keycloak来保护React应用程序。我正在使用两个包:React-钥匙罩和钥匙罩-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
我尝试过不同的init选项,包括:
initOptions={{ onLoad: "login-required"}}
initOptions={{ checkLoginIframe: false }}
但好像都不管用。
我发现没有任何例子能做得比这更多,所以我不确定这是一个bug,还是我错过了一些配置,或者其他什么。
我当前使用的版本:@React-密钥伪装/web@3.4.0密钥伪装-js@19.0.1
但是已经使用了较新和较旧的版本,没有成功。
类似的问题:Page keeps refreshing and changing the query parameter 'state' and 'session' in URL when implementing React with keycloak
1条答案
按热度按时间x8diyxa71#
更新:https://github.com/react-keycloak/react-keycloak/issues/182
我正在使用React 18.0,其中StrictMode导致useEffect被调用两次。这似乎是ReactKeycloakProvider+ keycloak.js的一个突破性变化。解决方案是将StrictMode移动到ReactKeycloakProvider内部,而不是移动到整个应用程序中!