MsalBroadcastService.inProgress$始终处于startup状态问题求助

问题描述 #

• 首次进入B2cActivationComponent时，代码后半段执行并跳转至Azure B2C；
• 从B2C登录返回后，本应触发代码前半段的跳转逻辑，但MsalBroadcastService的inProgress$返回的status始终为startup而非预期的none；
• 尝试使用setInterval等待状态变化无效，仅刷新页面后status才变为none。

相关代码 #

@Component({
  templateUrl: './b2c-activation.component.html',
  styleUrls: ['../home.scss']
})
export class B2cActivationComponent implements OnInit, OnDestroy {
  private readonly b2cResetInFlowKey = 'b2cResetInFlow';
  private unsubscribe$ = new Subject<void>();
  private b2cResetInFlow = false;

  constructor(
    private oAuthAuthenticationService: OAuthAuthenticationService,
    private msalService: MsalService,
    private msalBroadcastService: MsalBroadcastService,
    private b2CConfigurationService: B2CConfigurationService,
    private route: ActivatedRoute,
    private router: Router,
  ) {
  }

  ngOnInit(): void {
    const sessionResetInFlow = sessionStorage.getItem(this.b2cResetInFlowKey);
    this.b2cResetInFlow = sessionResetInFlow === 'true';
    this.msalBroadcastService.inProgress$
      .pipe(
        takeUntil(this.unsubscribe$)
      )
      .subscribe((status) => {
        if (this.b2cResetInFlow && status === InteractionStatus.None) {
          this.setB2CResetInFlow(false)
          this.router.navigate(['']);
        }
      })

    const email = this.route.snapshot.queryParams.email;
    const activationId = this.route.snapshot.queryParams.activationId;
    this.oAuthAuthenticationService.activateB2C(email, activationId).pipe(
      takeUntil(this.unsubscribe$),
    ).subscribe(activated => {
      if (activated) {
        setTimeout(() => {
          this.setB2CResetInFlow(true);
          const resetPasswordFlowRequest: RedirectRequest = {
            authority: this.b2CConfigurationService.flowAuthorities.resetPassword,
            scopes: this.b2CConfigurationService.flowAuthorities.scopes,
            loginHint: email
          };
          this.msalService.loginRedirect(resetPasswordFlowRequest);
        }, 2000)
      }
    });
  }

  private setB2CResetInFlow(inFlow: boolean) {
    if (inFlow) {
      sessionStorage.setItem(this.b2cResetInFlowKey, 'true');
    } else {
      sessionStorage.removeItem(this.b2cResetInFlowKey);
    }
    this.b2cResetInFlow = inFlow;
  }

  ngOnDestroy(): void {
    this.unsubscribe$.next(null);
    this.unsubscribe$.complete();
  }
}

问题原因 #

1. 订阅时机滞后：组件中先读取sessionStorage再订阅inProgress$，但从B2C返回时MSAL的startup状态可能已在组件初始化前触发，导致错过状态变更事件。
2. MSAL回调处理未完成：从B2C跳转回来后，MSAL的重定向回调处理可能未完成，导致inProgress$一直停留在startup状态，组件监听时无法获取到none状态。
3. 不必要的延迟导致状态不同步：原代码中的setTimeout会延迟设置sessionStorage状态，和MSAL跳转操作产生时序差，引发状态判断逻辑失效。

解决建议 #

1. 调整订阅顺序并过滤状态变更 #

将inProgress$的订阅提前到组件初始化最前端，同时用操作符过滤无效状态，确保只处理关键状态变化：

ngOnInit(): void {
  // 优先订阅inProgress$，避免错过状态变更
  this.msalBroadcastService.inProgress$
    .pipe(
      filter(status => status === InteractionStatus.None || status === InteractionStatus.Startup),
      distinctUntilChanged(),
      takeUntil(this.unsubscribe$)
    )
    .subscribe((status) => {
      if (this.b2cResetInFlow && status === InteractionStatus.None) {
        this.setB2CResetInFlow(false);
        this.router.navigate(['']);
      }
    });

  // 后续处理sessionStorage和激活逻辑
  const sessionResetInFlow = sessionStorage.getItem(this.b2cResetInFlowKey);
  this.b2cResetInFlow = sessionResetInFlow === 'true';

  const email = this.route.snapshot.queryParams.email;
  const activationId = this.route.snapshot.queryParams.activationId;
  this.oAuthAuthenticationService.activateB2C(email, activationId).pipe(
    takeUntil(this.unsubscribe$),
  ).subscribe(activated => {
    if (activated) {
      this.setB2CResetInFlow(true);
      const resetPasswordFlowRequest: RedirectRequest = {
        authority: this.b2CConfigurationService.flowAuthorities.resetPassword,
        scopes: this.b2CConfigurationService.flowAuthorities.scopes,
        loginHint: email
      };
      this.msalService.loginRedirect(resetPasswordFlowRequest);
    }
  });
}

2. 等待MSAL回调处理完成后再监听状态 #

利用msalService.handleRedirectObservable()等待重定向回调处理完毕，确保MSAL状态正确更新后再监听inProgress$：

ngOnInit(): void {
  const sessionResetInFlow = sessionStorage.getItem(this.b2cResetInFlowKey);
  this.b2cResetInFlow = sessionResetInFlow === 'true';

  // 先处理MSAL重定向回调，确保状态同步
  this.msalService.handleRedirectObservable()
    .pipe(takeUntil(this.unsubscribe$))
    .subscribe({
      next: () => {
        // 回调完成后订阅inProgress$
        this.msalBroadcastService.inProgress$
          .pipe(
            filter(status => status === InteractionStatus.None),
            takeUntil(this.unsubscribe$)
          )
          .subscribe(() => {
            if (this.b2cResetInFlow) {
              this.setB2CResetInFlow(false);
              this.router.navigate(['']);
            }
          });
      },
      error: err => console.error('重定向回调处理失败', err)
    });

  // 处理激活逻辑
  const email = this.route.snapshot.queryParams.email;
  const activationId = this.route.snapshot.queryParams.activationId;
  this.oAuthAuthenticationService.activateB2C(email, activationId).pipe(
    takeUntil(this.unsubscribe$),
  ).subscribe(activated => {
    if (activated) {
      this.setB2CResetInFlow(true);
      const resetPasswordFlowRequest: RedirectRequest = {
        authority: this.b2CConfigurationService.flowAuthorities.resetPassword,
        scopes: this.b2CConfigurationService.flowAuthorities.scopes,
        loginHint: email
      };
      this.msalService.loginRedirect(resetPasswordFlowRequest);
    }
  });
}

3. 移除不必要的setTimeout #

原代码中的2秒延迟完全多余，会导致sessionStorage状态设置和MSAL跳转不同步，直接删除即可。

4. 校验MSAL配置 #

确保MsalModule的redirectUri配置和Azure B2C应用中设置的回调地址完全一致，避免MSAL无法正确处理回调导致状态卡住。

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