使用 keycloak 实现 React 时，页面不断刷新并更改 URL 中的查询参数"状态"和"会话"

Question

我试图使用React与Keycloak，初始化领域，用户和客户端后。每次npm启动react项目时，它都会每秒刷新一次，并改变状态

为例:

http://localhost: 3000/# = f9fe446d - 358 - e - 4206 - 811 - f - fe05f37a8981& session_state = 5 b741a8e - 28 - d2 - 4850 - a285 2 - e139fe5c204&代码= fe3ca9e6 f1 - 37 - 41 - e8 - 91是c2502e86b071.5b741a8e - 28 - d2 - 4850 - a285 - 2 - e139fe5c204.10d54989 - 1 - e8a - 486 b - b33b - 4 - a164f9f84ab

1秒后:

http://localhost: 3000/#状态= 37 e5d6e5 - 18 - e0 - 4578 - 89 - cc - 01 - ca41f397c9& session_state = 5 b741a8e - 28 - d2 - 4850 - a285 2 - e139fe5c204&代码= c1488eb9 40 - 42 - ed - - d2 - aee9 eff76e3ceabe.5b741a8e - 28 - d2 - 4850 - a285 - 2 - e139fe5c204.10d54989 - 1 - e8a - 486 b - b33b - 4 - a164f9f84ab

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中Realm的配置

Keycloak中用户的配置

Keycloak中客户端的配置

Answer 1

我对vue.js也有类似的问题。对我来说，我发现这是由于为观察当前会话状态而创建的iframe和第三方cookie缺少相同的esite属性造成的。可以通过将checkLoginIframe: false作为选项传递给init函数来禁用iframe。这是一个防止页面重新加载的解决方案。这不是一个真正的修复，因为你失去了获取状态的功能。

这个已经在这里回答了:Keycloak: Session cookie在新的Chrome SameSite/Secure cookie强制令牌请求中丢失

但是既然我先发现了你的问题，我决定无论如何都要回答。

这是一个链接到keycloak文档的状态iframe和现代浏览器中的问题:https://www.keycloak.org/docs/latest/securing_apps/index.html#session-status-iframehttps://www.keycloak.org/docs/latest/securing_apps/index.html _modern_browsers