keycloak-js页面刷新后认证状态丢失的问题求助

你的问题核心是Keycloak初始化时未主动检查现有认证会话，导致页面刷新后无法自动恢复认证状态。以下是具体修复步骤：

1. 修改Keycloak初始化配置 #

在Provider.js中，给keycloak.init添加onLoad: 'check-sso'参数，该配置会让Keycloak在初始化阶段自动检测当前是否存在有效的认证会话（包括刷新页面时的存储凭证）。同时可关闭checkLoginIframe避免不必要的iframe检查：

let keycloak = new Keycloak({
    url: "http://localhost:8081/",
    realm: "test",
    clientId: "test-public"
});

export function initKeycloak() {
    return keycloak.init({
        redirectUri: "http://localhost:3000",
        pkceMethod: "S256",
        onLoad: 'check-sso', // 关键配置：自动检查认证会话
        checkLoginIframe: false // 关闭iframe检查，减少潜在问题
    }).then(authenticated => {
        console.log("当前认证状态:", authenticated);
        return authenticated;
    });
}

export default keycloak;

2. 调整React应用渲染时机 #

确保React应用在Keycloak初始化完成后再渲染，避免渲染时认证状态还未确定：

修改index.js，等待initKeycloak的Promise完成后再执行渲染：

const root = ReactDOM.createRoot(document.getElementById('root'));

// 等待Keycloak初始化完成后渲染应用
initKeycloak().then(() => {
    root.render(
        <BrowserRouter>
            <Routes>
                <Route path="/" element={<App/>} />
            </Routes>
        </BrowserRouter>
    );
});

function App() {
    return (
        <div>
            <button onClick={() => keycloak.login()}> Login </button>
        </div>
    );
}

3. 验证Keycloak客户端配置 #

登录Keycloak管理控制台，检查test-public客户端的配置：

• Valid Redirect URIs：必须包含http://localhost:3000/*（确保登录回调和SSO检查都能正常跳转）
• Web Origins：设置为http://localhost:3000或*（开发环境下允许跨域）

完成以上修改后，刷新页面时Keycloak会自动检测并恢复认证状态，无需再次点击登录按钮。

内容的提问来源于stack exchange，提问作者Krusty the Clown