部署在Azure的Next.js应用中MSAL登出异常问题排查请求

我在Azure部署的Next.js应用中使用以下MSAL库版本：

"@azure/msal-browser": "3.2.0",
"@azure/msal-node": "2.15.0",
"@azure/msal-react": "2.1.1",

问题场景 #

• 场景1：应用加载后直接登录，随即登出，功能正常。
• 场景2：应用加载后登录，导航至其他页面后尝试登出，失败并抛出两个错误：

ClientConfigurationError: url_parse_error: URL could not be parsed into appropriate segments.
BrowserAuthError: interaction_in_progress: Interaction is currently in progress. Please ensure that this interaction has been completed before calling an interactive API

本地环境两个场景均正常，仅部署环境出现该问题。

登出处理函数代码 #

const handleSignOut = async () => {
    if (inProgress !== InteractionStatus.None) {
      console.log(inProgress + " already in progress.");
      return;
    }
    console.log("envVars", envVars);
    if (!envVars.cloudInstance || !envVars.tenantId) {
      console.error(
        "envVars Invalid authority URL cloudInstance",
        envVars.cloudInstance
      );
      console.error("envVars Invalid authority URL tenantId", envVars.tenantId);
      return;
    }
    setIsLoading(true);
    deleteCookie("access_token");
    setIsLogoutInProgress(true);
    sessionStorage.removeItem(MSAL_INTERACTION_STATUS);
    try {
      if (inProgress === InteractionStatus.None) {
        await instance.logoutRedirect({
          postLogoutRedirectUri: "/",
          account: instance.getActiveAccount(),
        });
      } else {
        console.error("MSAL interaction in progress or status is invalid.");
      }
    } catch (e) {
      console.log(e);
    } finally {
      setIsLogoutInProgress(false);
      setIsLoading(false);
    }
  };

解决方案建议 #

1. 修正postLogoutRedirectUri为绝对路径
   部署环境中，MSAL要求postLogoutRedirectUri为完整绝对URL，相对路径"/"可能因域名解析问题触发url_parse_error。修改为：

postLogoutRedirectUri: `${window.location.origin}/`,

2. 移除手动操作sessionStorage的代码
   手动删除MSAL_INTERACTION_STATUS会破坏MSAL内部的交互状态管理，导致interaction_in_progress错误。删除这一行：

sessionStorage.removeItem(MSAL_INTERACTION_STATUS);

3. 确保登出时account参数有效
   导航到其他页面后，instance.getActiveAccount()可能返回null，建议在登录成功后将当前账号存入组件状态，登出时使用该保存的账号：

// 登录成功时保存账号
const [activeAccount, setActiveAccount] = useState(null);
// 登录成功后调用setActiveAccount(instance.getActiveAccount());

// 登出时使用保存的账号
await instance.logoutRedirect({
  postLogoutRedirectUri: `${window.location.origin}/`,
  account: activeAccount,
});

4. 验证部署环境变量
   确认Azure部署环境中envVars.cloudInstance和envVars.tenantId已正确注入，避免因环境变量缺失导致authority URL解析失败。

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