React单页应用接入Azure认证后登出功能报错问题咨询

你遇到的stubbed_public_client_application_called错误，本质是调用登出方法的instance不是经过正确初始化的PublicClientApplication实例，而是msal-react提供的默认桩实例，这个问题在微前端拆分登录模块和Header模块的场景下非常常见。

• 第一步：调整MsalProvider作用域或共享实例
  微前端场景下如果Header是独立模块，没有被登录模块的<MsalProvider>包裹时，通过useMsal() hook获取到的instance就是未初始化的桩实例。
  可以选择两种方案解决：

  1. 在微前端的根应用外层统一套上MsalProvider，所有子模块共享同一个初始化完成的实例
  2. 把初始化完成的PublicClientApplication实例挂载到全局对象（比如window）上，所有微模块直接调用全局实例，不要单独在Header模块用useMsal获取实例

• 第二步：修正登出逻辑代码
  可以参考下面的代码调整登出逻辑，增加异常判断：

// 优先用全局共享的msal实例，确保是已经初始化的真实实例
const msalInstance = window.msalInstance;

async function logout(e) {
  if (!msalInstance) {
    window.location.href = "/account";
    return;
  }
  const homeAccountId = window.localStorage.getItem("homeAccountId");
  if (!homeAccountId) {
    window.localStorage.clear();
    window.location.href = "/account";
    return;
  }
  const currentAccount = msalInstance.getAccountByHomeId(homeAccountId);
  if (currentAccount) {
    await msalInstance.logoutRedirect({
      account: currentAccount,
      postLogoutRedirectUri: "/account",
    });
  } else {
    window.localStorage.clear();
    window.location.href = "/account";
  }
}

• 第三步：检查依赖版本一致性
  确认登录的Account微前端和Header模块安装的@azure/msal-browser、@azure/msal-react依赖版本完全一致，版本差异会导致实例不兼容，触发桩实例调用错误。

• 第四步：验证缓存有效性
  确认localStorage中存储的homeAccountId是登录后写入的有效值，没有被其他模块篡改或者清空，否则会导致获取账号信息失败，间接触发相关异常。

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