反应:在重定向到 Keycloak IDP 页面之前阻止显示应用程序

Posted

技术标签:

【中文标题】反应:在重定向到 Keycloak IDP 页面之前阻止显示应用程序【英文标题】:React: prevent showing application before redirecting to Keycloak IDP page 【发布时间】:2021-09-07 05:02:37 【问题描述】:

我正在开发一个 React 应用程序并使用 Keycloak 对整个应用程序进行身份验证和授权。不会有任何不安全的路线。因此,我在 index.js 文件中初始化 KeyCloak。 我也跳过了 KeyCloak 的普通登录页面,因为所有登录都将使用 MS IDP 完成。 只有KeyCloak适配器正在使用并且可以使用,没有其他第三方包。

它工作得很好,但是在重定向发生之前,任何访问的路由都会闪烁一秒钟。

我有 KeyCloak 作为这样的服务:

import Keycloak from "keycloak-js";

const _kc = new (Keycloak as any)("/keycloak.json");

const initKeycloak = (reactRender: any, component: any, domMethod: any) => 
  _kc
    .init()
    .then(() => 
      _kc.login( idpHint: "azureAD" );
    )
    .then(() => 
      reactRender(component, domMethod("root"));
    );
;

我的 index.js 文件如下所示:

import React from "react";
import ReactDOM from "react-dom";

import App from "./App";
import keycloakService from "./keyCloakService";

const q = document.getElementById.bind(document);

keycloakService.initKeycloak(ReactDOM.render, <App />, q);

由于检查身份验证是异步的,我想我可以通过 ReactDOM.render 方法并只有在身份验证发生时才能成功调用它。 但是,即使使用这种方法,我也无法让它工作,并且路线会瞬间闪烁。

如何在不使用任何第三方软件包的情况下实现这一目标?

提前致谢!

【问题讨论】:

【参考方案1】:

只有当 KeyCloak 服务返回的 auth 变量为 true 时,我才设法更改行为并显示 App 组件。

【讨论】:

以上是关于反应:在重定向到 Keycloak IDP 页面之前阻止显示应用程序的主要内容,如果未能解决你的问题,请参考以下文章