如何让MSAL handleRedirectPromise先返回再执行后续代码？解决重复登录报错

问题根源 #

你的代码中handleRedirectPromise()是异步操作，当前逻辑没有等待它完成就执行了用户信息检查和登录触发。这会导致：当login.component里的this.auth.userInfo执行时，handleRedirectPromise的回调还没来得及设置activeAccount，getAllAccounts()返回空数组，进而触发二次login()调用，此时重定向交互仍在进行，最终抛出BrowserAuthError: interaction_in_progress错误。

修改步骤 #

1. 封装AuthService中的重定向处理逻辑 #

将handleRedirectPromise封装成可被组件等待的Promise方法，确保账号设置完成后再对外返回结果：

// auth.service.ts
public handleRedirect(): Promise<AuthenticationResult | null> {
  return this.msalInstance.handleRedirectPromise().then(res => {
    // 确保获取到账号后设置为活跃账号
    if (res?.account) {
      this.msalInstance.setActiveAccount(res.account);
    }
    return res;
  });
}

// 保留原userInfo getter不变
public get userInfo(): AccountInfo | null {
  const currentAccounts = this.msalInstance.getAllAccounts();
  return currentAccounts[0];
}

2. 修改LoginComponent的逻辑，等待重定向处理完成后再执行检查 #

在组件初始化时，先等待重定向处理完成，再判断用户状态，避免触发二次登录：

// login.component.ts
import { OnInit } from '@angular/core';

// 实现OnInit钩子
async ngOnInit(): Promise<void> {
  // 等待重定向处理完成，确保账号已被正确设置
  await this.auth.handleRedirect();

  const userInfo = this.auth.userInfo;
  if (userInfo) {
    this.auth.checkUserAuthorization(userInfo.username).subscribe((res) => {
      const message = res.Role !== null ? res : res.toLowerCase();
      if (message === 'User Not Exist') {
        this.router.navigate(['/notAuthorise']);
      } else {
        this.auth.setUserLoggedIn(true);
        this.router.navigate(['/appHeader']);
      }
    }, (err) => {
      this.router.navigate(['']);
    });
    // 移除原subscribe外的多余导航代码，避免逻辑冲突
  } else {
    this.auth.login();
  }
}

关键注意点 #

• 异步操作顺序：必须确保handleRedirectPromise完成后再执行任何依赖账号状态的逻辑，这是解决interaction_in_progress错误的核心。
• 活跃账号设置：MSAL要求必须通过setActiveAccount设置当前活跃账号，否则getAllAccounts可能无法正确返回已登录的账号信息。
• 避免重复导航：原代码中subscribe外的this.router.navigate(['/appHeader'])会跳过接口校验直接跳转，需删除以保证业务逻辑正确性。

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