Angular13中BrowserAuthError: interaction_in_progress问题求助

登出后立即尝试重新登录时，触发BrowserAuthError: interaction_in_progress错误，仅关闭浏览器能解决该问题。推测是缓存相关问题，但暂未找到解决办法。

当前使用的登录代码：

async signIn() {
    // console.log(this.appMSALObj)
    var _this = this;
    await this.appMSALObj.loginPopup(settings.loginRequest)
      .then(function(response) {
        //console.log("authService: login complete")
        _this.selectAccount();
        //console.log(_this.account)
        _this.router.navigate(['/home'])
      })
      .catch(error => {
        console.error(error);
      });
  }

注：代码从未执行到selectAccount函数。

相关配置信息：

• msalConfig 使用localStorage作为缓存存储位置
• storeAuthStateInCookie标志设为false

解决方案 #

1. 确保登出操作完全完成后再触发登录 #

MSAL的登出方法是异步操作，登出后立即执行登录会导致内部状态未清理完毕。修改登出逻辑，等待登出完成并手动清理MSAL相关缓存：

async signOut() {
  await this.appMSALObj.logoutPopup({
    postLogoutRedirectUri: "/login" // 按需设置登出后的跳转页面
  });
  // 清理localStorage中MSAL的相关键值
  const msalRelatedKeys = Object.keys(localStorage).filter(key => key.startsWith("msal."));
  msalRelatedKeys.forEach(key => localStorage.removeItem(key));
}

2. 登录前检查交互状态，避免重复触发 #

调用loginPopup前，先检查是否有正在进行的交互或活跃账户，防止冲突：

async signIn() {
  const activeAccount = this.appMSALObj.getActiveAccount();
  // 检查是否已有活跃账户或正在进行的认证交互
  if (activeAccount || this.appMSALObj.getActiveRequest()) {
    return;
  }
  
  try {
    const response = await this.appMSALObj.loginPopup(settings.loginRequest);
    this.selectAccount();
    this.router.navigate(['/home']);
  } catch (error) {
    // 针对interaction_in_progress错误延迟重试
    if (error.errorCode === "interaction_in_progress") {
      setTimeout(() => this.signIn(), 1000);
    } else {
      console.error(error);
    }
  }
}

3. 临时启用Cookie存储交互状态 #

尽管当前设置storeAuthStateInCookie: false，但启用该选项可以避免部分场景下的状态残留问题，可临时修改配置测试：

const msalConfig = {
  auth: {
    // 保留原有auth配置
    clientId: "your-client-id",
    authority: "your-authority-url"
  },
  cache: {
    cacheLocation: "localStorage",
    storeAuthStateInCookie: true // 改为true测试效果
  }
};

4. 统一使用同一种交互模式 #

确保登录和登出使用相同的交互模式（全用Popup或全用Redirect），混合模式容易导致内部状态冲突。

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