React应用跳转Keycloak IDP前如何避免页面内容短暂闪现？

你当前的代码逻辑存在执行顺序错误：_kc.login() 触发重定向跳转后会立刻 resolve 自身返回的Promise，不会等待用户完成登录跳转回调，因此你写在login()之后then回调里的渲染逻辑会在重定向发生前执行，导致App内容短暂闪现后才跳转。

1. 调整Keycloak初始化逻辑 #

仅在确认用户已经完成身份认证后再执行React渲染逻辑，未认证状态下直接触发跳转，不执行任何渲染操作。
修改后的keycloakService代码如下：

import Keycloak from "keycloak-js";

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

const initKeycloak = (reactRender: any, component: any, domMethod: any) => {
  _kc
    .init({
      promiseType: 'native'
    })
    .then((authenticated) => {
      // 仅认证通过后渲染应用
      if (authenticated) {
        reactRender(component, domMethod("root"));
        return;
      }
      // 未认证直接跳转，不执行渲染
      _kc.login({ idpHint: "azureAD" });
    });
};

index.js代码不需要修改。

2. 可选兜底优化 #

你可以直接修改public/index.html中的root容器默认内容，从根源上避免任何非预期内容闪现：

<div id="root">
  <!-- 可自定义加载样式，也可直接留空 -->
  <style>body { margin: 0; background: #ffffff; }</style>
</div>

React渲染时会自动覆盖root容器内的默认内容，认证跳转前页面只会显示你预设的空白/加载状态，不会出现应用内容。

内容的提问来源于stack exchange，提问作者Luiz Gustavo