Angular17升级MSAL3.0后getAllAccounts返回空数组问题

在Angular 17项目中将@azure/msal-angular和@azure/msal-browser从2.16.0版本升级至3.0.0版本后，调用this.authService.instance.getAllAccounts()返回空数组，无法获取用户账户。控制台未出现任何错误，除库版本升级外，配置和初始化流程未发生变化。

问题代码 #

import { MsalService, MsalBroadcastService, MSAL_GUARD_CONFIG, MsalGuardConfiguration } from '@azure/msal-angular';
import { InteractionType, InteractionStatus, PopupRequest, RedirectRequest, AuthenticationResult, PublicClientApplication } from '@azure/msal-browser';
import { b2cPolicies, msalConfig } from './auth/auth-config';
import { Subject, filter, takeUntil } from 'rxjs';

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html',
  styleUrls: ['./your-component.component.css']
})
export class YourComponent implements OnInit, OnDestroy {
  private _destroying$ = new Subject<void>();
  private msalApp: PublicClientApplication;
  private isMsalInitialized: boolean = false;
  loginDisplay = false;
  isLoading = false;

  constructor(
    @Inject(MSAL_GUARD_CONFIG) private msalGuardConfig: MsalGuardConfiguration,
    private authService: MsalService,
    private msalBroadcastService: MsalBroadcastService,
    private localAuthService: LocalAuthService
  ) {
    this.msalApp = new PublicClientApplication(msalConfig);
    this.initializeMsal();
  }

  private async initializeMsal(): Promise<void> {
    try {
      await this.msalApp.initialize();
      await this.msalApp.handleRedirectPromise();
      this.isMsalInitialized = true;
    } catch (error) {
      console.error('MSAL initialization error:', error);
    }
  }

  async ngOnInit() {
    this.msalBroadcastService.inProgress$
      .pipe(
        filter(status => status === InteractionStatus.None),
        takeUntil(this._destroying$)
      )
      .subscribe({
        next: () => this.setLoginDisplay(),
        error: (error) => {
          this.isLoading = false;
          console.error('Error during subscription:', error);
        }
      });
  }

  async setLoginDisplay() {
    if (!this.isMsalInitialized) {
      await this.initializeMsal();
    }
    if (!this.localAuthService.isLogin) {
      console.log(this.authService.instance.getAllAccounts());
      const accounts = await this.msalApp.getAllAccounts();
      this.loginDisplay = accounts.length > 0;
      if (this.loginDisplay) {
        const data = accounts[0];
        // Further processing...
      }
    }
  }

  ngOnDestroy() {
    this._destroying$.next();
    this._destroying$.complete();
  }
}

问题原因及解决方案 #

1. 重复创建MSAL实例（核心问题）

组件中手动实例化了PublicClientApplication，但MsalService已经内部维护了一个初始化好的MSAL实例。两个独立实例的账户存储完全隔离，导致authService.instance.getAllAccounts()无法获取到手动创建实例中的账户（反之亦然）。

修复：
删除组件中手动创建的msalApp实例和initializeMsal方法，全程使用authService.instance。

2. MSAL 3.x的破坏性变更

• 初始化逻辑变更：MSAL Angular 3.x要求通过MsalModule.forRoot()在模块层面完成初始化，不再需要手动调用initialize()和handleRedirectPromise()，这些操作已由MsalService自动处理。
• 账户存储格式变更：3.x版本修改了本地存储中账户信息的键名，旧版本2.x的账户数据无法被直接识别，导致升级后无法读取旧账户。
• InteractionStatus枚举值变更：确保使用的InteractionStatus.None是MSAL 3.x中的正确枚举值。

3. 修正后的代码示例

import { MsalService, MsalBroadcastService, MSAL_GUARD_CONFIG, MsalGuardConfiguration } from '@azure/msal-angular';
import { InteractionStatus } from '@azure/msal-browser';
import { b2cPolicies } from './auth/auth-config';
import { Subject, filter, takeUntil } from 'rxjs';

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html',
  styleUrls: ['./your-component.component.css']
})
export class YourComponent implements OnInit, OnDestroy {
  private _destroying$ = new Subject<void>();
  loginDisplay = false;
  isLoading = false;

  constructor(
    @Inject(MSAL_GUARD_CONFIG) private msalGuardConfig: MsalGuardConfiguration,
    private authService: MsalService,
    private msalBroadcastService: MsalBroadcastService,
    private localAuthService: LocalAuthService
  ) {}

  ngOnInit() {
    this.msalBroadcastService.inProgress$
      .pipe(
        filter(status => status === InteractionStatus.None),
        takeUntil(this._destroying$)
      )
      .subscribe({
        next: () => this.setLoginDisplay(),
        error: (error) => {
          this.isLoading = false;
          console.error('Error during subscription:', error);
        }
      });
  }

  setLoginDisplay() {
    if (!this.localAuthService.isLogin) {
      const accounts = this.authService.instance.getAllAccounts();
      console.log(accounts);
      this.loginDisplay = accounts.length > 0;
      if (this.loginDisplay) {
        const data = accounts[0];
        // 后续业务处理
      }
    }
  }

  ngOnDestroy() {
    this._destroying$.next();
    this._destroying$.complete();
  }
}

4. 额外处理：旧账户迁移

如果用户在升级前已登录，需要触发一次静默登录来刷新账户信息，确保3.x版本能识别：

async refreshAccountIfNeeded() {
  const accounts = this.authService.instance.getAllAccounts();
  if (accounts.length === 0) {
    try {
      await this.authService.instance.silentLogin({
        scopes: ['openid', 'profile'] // 替换为你的应用权限
      });
    } catch (error) {
      // 静默登录失败，引导用户重新登录
      this.authService.loginRedirect();
    }
  }
}

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