React中使用MSAL如何避免登出前未认证内容闪现？

问题核心是调用logoutRedirect()后，本地认证状态立即被清除（isAuthenticated变为false），但跳转到微软登出页面存在短暂延迟，导致未认证模板短暂显示。可以通过跟踪登出操作状态来避免这个问题，下面是两种可行方案：

方案一：自定义本地状态标记登中 #

1. 创建全局认证状态上下文，传递登中标记：

import { createContext, useContext, useState } from 'react';

const AuthContext = createContext();

export const AuthProvider = ({ children }) => {
  const [isLoggingOut, setIsLoggingOut] = useState(false);
  return (
    <AuthContext.Provider value={{ isLoggingOut, setIsLoggingOut }}>
      {children}
    </AuthContext.Provider>
  );
};

export const useAuth = () => useContext(AuthContext);

2. 在触发登出的组件中设置登中状态：

import { useMsal } from '@azure/msal-react';
import { useAuth } from './AuthContext';

const LogoutButton = () => {
  const { instance } = useMsal();
  const { setIsLoggingOut } = useAuth();

  const handleLogout = () => {
    setIsLoggingOut(true);
    instance.logoutRedirect({
      postLogoutRedirectUri: '/'
    });
  };

  return <button onClick={handleLogout}>登出</button>;
};

3. 在Layout组件中判断登中状态，避免切换模板：

import { useIsAuthenticated } from '@azure/msal-react';
import { useAuth } from './AuthContext';

const Layout = () => {
  const isAuthenticated = useIsAuthenticated();
  const { isLoggingOut } = useAuth();

  if (isAuthenticated || isLoggingOut) {
    // 登中时保持显示认证模板，也可替换为加载动画
    return <>Authenticated Template</>;
  } else {
    return <>Unauthenticated Template</>;
  }
};

方案二：监听MSAL的登出事件 #

利用MSAL事件系统，通过logoutStart事件标记登中状态：

1. 在应用入口初始化MSAL时添加事件监听：

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

const msalConfig = {
  // 你的MSAL配置（clientId、authority等）
};

const msalInstance = new PublicClientApplication(msalConfig);

function App() {
  const [isLoggingOut, setIsLoggingOut] = useState(false);

  useEffect(() => {
    const handleLogoutStart = () => setIsLoggingOut(true);
    // 监听登出开始事件
    msalInstance.addEventCallback(event => {
      if (event.eventType === 'logoutStart') {
        handleLogoutStart();
      }
    });

    return () => {
      msalInstance.removeEventCallback(handleLogoutStart);
    };
  }, []);

  return (
    <MsalProvider instance={msalInstance}>
      <AuthProvider value={{ isLoggingOut }}>
        {/* 你的应用路由/组件 */}
      </AuthProvider>
    </MsalProvider>
  );
}

2. Layout组件的渲染逻辑同方案一，通过isLoggingOut状态避免模板闪现。

原理说明 #

两种方案都是在登出操作发起后，标记“正在登出”状态，让组件在跳转完成前不切换到未认证模板。当跳转到微软登出页面后，页面会刷新并跳转到postLogoutRedirectUri指定地址，此时isAuthenticated为false且isLoggingOut重置，正常显示未认证模板。

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