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

Posted 2023-02-19

【中文标题】反应：在重定向到 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 组件。