MSAL 2.0 如何快速重定向到登录页 避免先加载应用内容闪屏

问题根因 #

你当前的代码会先渲染<App />组件，再执行useEffect里的异步登录校验逻辑，异步回调存在延迟，所以会出现1秒左右的业务内容闪屏后再跳转。

解决方案 #

方案1：增加加载状态拦截 #

在校验登录态完成前不渲染任何业务内容，代码修改如下：

import { useState, useEffect } from 'react';
import { PublicClientApplication } from '@azure/msal-browser';

export default function Main() {
  const msalInstance = new PublicClientApplication(msalConfig);
  const [authChecked, setAuthChecked] = useState(false);

  useEffect(() => {
    msalInstance
      .handleRedirectPromise()
      .then((res) => {
        if (res === null) {
          msalInstance.loginRedirect(loginRequest);
        } else {
          console.log(res);
          setAuthChecked(true);
        }
      })
      .catch((err: any) => {
        console.log("err", err);
        // 异常场景可根据需求处理，比如跳转错误页或重新触发登录
        setAuthChecked(true);
      });
  }, []);

  // 登录态校验完成前返回空内容，也可以替换为自定义加载动画
  if (!authChecked) return null;

  return <App instance={msalInstance} />;
}

方案2：使用MSAL React官方提供的模板组件（更规范） #

首先将MSAL实例初始化移到组件外部避免重复初始化，再用官方提供的身份模板做渲染拦截：

import { PublicClientApplication } from '@azure/msal-browser';
import { MsalProvider, UnauthenticatedTemplate, AuthenticatedTemplate } from '@azure/msal-react';
import { useEffect } from 'react';

// 全局仅初始化一次MSAL实例
const msalInstance = new PublicClientApplication(msalConfig);

const AutoLoginRedirect = () => {
  useEffect(() => {
    msalInstance.loginRedirect(loginRequest);
  }, []);
  return null;
}

export default function Main() {
  return (
    <MsalProvider instance={msalInstance}>
      {/* 未登录用户仅触发重定向，不渲染业务内容 */}
      <UnauthenticatedTemplate>
        <AutoLoginRedirect />
      </UnauthenticatedTemplate>
      {/* 仅已登录用户渲染业务应用 */}
      <AuthenticatedTemplate>
        <App instance={msalInstance} />
      </AuthenticatedTemplate>
    </MsalProvider>
  );
}

体验优化 #

如果需要完全消除白屏感，可以在项目根HTML文件中提前写好全局加载占位样式，等React渲染完成后会自动替换占位内容。

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