多独立React单租户应用使用@azure/msal-react跨应用自动复用账户问题

问题原因 #

同一租户下的多个SPA使用相同的authority，MSAL默认会复用浏览器中存储的租户级会话缓存，导致不同SPA自动共享已登录账户。同时默认缓存键未区分不同应用，localStorage中的认证数据会被跨应用读取，最终引发非预期的账户复用问题。

解决方案 #

1. 为每个SPA配置唯一缓存键 #

修改msalConfig的cache部分，添加cacheKey字段，每个SPA设置独一无二的标识，确保各应用的localStorage缓存完全独立：

export const msalConfig = {
  auth: {
    clientId: "YOUR_UNIQUE_CLIENT_ID",
    authority: "COMMON_AUTHORITY_URL",
    redirectUri: "YOUR_UNIQUE_REDIRECT_URI",
  },
  cache: {
    cacheLocation: 'localStorage',
    storeAuthStateInCookie: true,
    cacheKey: "spa1-unique-cache-key" // 每个SPA设置不同值，比如用clientId或站点专属标识
  }
};

2. 登录时强制显示账户选择界面 #

在调用登录方法时，传入prompt: "select_account"参数，强制用户选择账户，避免自动复用已有会话：

// 弹窗登录示例
instance.loginPopup({
  prompt: "select_account",
  // 按需添加scope等其他参数
});

// 跳转登录示例
instance.loginRedirect({
  prompt: "select_account",
  // 按需添加scope等其他参数
});

3. 验证缓存隔离效果 #

登录不同SPA后，打开浏览器开发者工具的Application -> Local Storage，检查每个站点下的缓存条目，确认以各自cacheKey为标识的缓存独立存在，无交叉读取情况。

关键说明 #

• cacheKey是MSAL区分不同应用缓存的核心配置，必须保证每个SPA唯一。
• prompt: "select_account"会忽略浏览器中已有的租户会话，强制用户重新选择账户，满足多账户用户的切换需求。
• 保持cacheLocation: 'localStorage'可实现跨浏览器会话保留认证状态，符合需求。

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