如何在MSAL React中实现登出后停止所有自动重定向操作？

根因说明 #

登出后跳转到www.office.com、自动弹出登录提示的问题，核心原因有两个：

1. 代码中配置的postLogoutRedirectUri没有在Azure AD应用注册后台的「Web 重定向 URI」列表中完成登记，微软身份平台验证该地址不合法时，会自动使用默认 fallback 跳转地址office.com
2. 登出操作未完全清理本地MSAL账户缓存，同时项目路由/全局认证守卫在登出后回到站点时，检测到无有效登录态，自动触发了登录请求

修正步骤 #

1. 完成Azure后台配置 #

打开对应应用的Azure AD注册页面，在「身份验证」-「Web」-「重定向 URI」中，添加代码中配置的https://localhost:3000/logout地址，同时按需勾选「ID令牌」「访问令牌」的隐式授权选项。

2. 修正登出逻辑 #

调用登出前先清理本地所有账户缓存，调整登出参数确保配置生效，修正后的代码如下：

export const msalConfig: Configuration = {
  auth: {
    clientId: "xxxxxx",
    // 确认authority和你实际的租户ID/应用路径一致，避免使用common端点产生跨应用会话干扰
    authority: "https://login.microsoftonline.com/xxx",
    redirectUri: "http://localhost:3000",
    postLogoutRedirectUri: "https://localhost:3000/logout"
  }
};

import { useMsal } from "@azure/msal-react";
const { instance } = useMsal();

export function handleLogout(instance: any) {   
  // 第一步：清空本地所有账户缓存，避免残留会话触发自动登录
  const allAccounts = instance.getAllAccounts();
  allAccounts.forEach(account => instance.removeAccount(account));

  // 第二步：调用logoutRedirect明确指定登出重定向逻辑
  instance.logoutRedirect({
    postLogoutRedirectUri: "https://localhost:3000/logout"
  });
}

3. 调整路由守卫逻辑 #

检查项目路由配置，确保/logout路径不需要身份认证即可访问，避免登出后跳转回该页面时，路由守卫自动触发登录流程。

完全停止重定向的配置 #

如果需求是登出后完全不跳转任何页面，只停留在当前页，可直接使用logout方法搭配onRedirectNavigate返回false的配置即可：

export function handleLogout(instance: any) {   
  const allAccounts = instance.getAllAccounts();
  allAccounts.forEach(account => instance.removeAccount(account));
  instance.logout({
    onRedirectNavigate: () => {
      // 返回false会阻止MSAL自动执行重定向操作
      return false;
    }
  });
}

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