Angular集成MSAL时如何获取含handleRedirectCallback方法的MSAL对象

方法所属对象说明 #

handleRedirectCallback（新版本为handleRedirectPromise）方法就挂载在你已经注入的MsalService的instance属性上，你代码中用到的this.authService.instance就可以直接调用该方法，无需额外引入其他对象。

修复后的逻辑代码 #

你遇到的是重定向回调未完成就监听交互状态的时序问题，必须先等待回调处理完成后再订阅inProgress$流，修复后代码示例：

ngOnInit(): void {
  // 优先处理Azure B2C登录后的重定向回调
  this.authService.instance.handleRedirectPromise().then(() => {
    // 回调处理完成后再监听交互状态
    this.msalBroadcastService.inProgress$
      .pipe(
        filter((status: InteractionStatus) => status === InteractionStatus.None)
      )
      .subscribe(() => {
        this.setLoginDisplay();
        this.checkAndSetActiveAccount();
        this.getClaims(this.authService.instance.getActiveAccount()?.idTokenClaims)
      });
  });
}

逻辑说明 #

Azure B2C登录完成跳转回站点时，MSAL需要先解析回调返回的授权凭证、缓存令牌，这个过程中交互状态会一直处于非None的进行中状态。只有等handleRedirectPromise执行完成后，交互状态才会正常更新为None，从而触发你写的后续业务逻辑。

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