React With Keycloak Redirect Loop

Question

我都是react和keycloak新手，我正在努力学习如何将两者整合在一起。我尝试使用尽可能少的库，同时学习以确保我正确理解所有的核心概念-所以没有Keycloak包装器，没有redux状态等等。

我的问题是，我结束了一个无限循环后keycloak身份验证，因为我想设置当前用户在组件状态。

我理解为什么循环发生-设置状态将触发我的组件的重新渲染，我做身份验证，但我不知道什么是最好的方法来修复它。

export const App = function () {
const [user, setUser] = useState('unknown');
const keycloak = new Keycloak();
keycloak.init({
onLoad: 'login-required'
}).then(function (authenticated) {
//setUser(keycloak.tokenParsed.preferred_username); // <-- uncommenting this line does a redirect loop
alert(authenticated ? 'authenticated' : 'not authenticated');
}).catch(function (e) {
console.log('Failed to initialize keycloak', e);
});
return (
<div>
Hello {user}
</div>
)
}

Keycloak配置

{
"realm": "master",
"auth-server-url": "http://localhost:8080/",
"url": "http://localhost:8080/",
"resource": "bankerise",
"ssl-required": "external",
"public-client": true
}

任何帮助都非常感谢!欢呼声

Answer 1

因为你做错了!您的代码的问题是，您单独在组件体内设置状态，而没有将其包装在任何东西中。因此，这将在每次组件重新渲染时执行。状态的设置也会触发重新渲染。

基本上，当你在设置状态时，react会重新渲染页面当你碰到同一行时也就是说，设置状态行，react trigger会重新渲染。你说对了。所以循环。

这是你的复制面条代码

import { useEffect } from 'react';
export const App = function () {
const [user, setUser] = useState('unknown');
useEffect(() => {
const keycloak = new Keycloak();
keycloak
.init({
onLoad: 'login-required',
})
.then(function (authenticated) {
setUser(keycloak.tokenParsed.preferred_username); // <-- uncommenting this line does a redirect loop
alert(authenticated ? 'authenticated' : 'not authenticated');
})
.catch(function (e) {
console.log('Failed to initialize keycloak', e);
});
}, []);
return <div>Hello {user}</div>;
};