@azure/msal-angular@2.X.X中BroadcastService缺失的迁移方案问询

MSAL Angular v2 已移除v1版本的BroadcastService，等效替代服务为MsalBroadcastService，两者API设计存在本质差异，无法通过直接替换服务名完成迁移，具体迁移方法如下：

• 调整导入与依赖注入
  移除原有代码中对BroadcastService的引用，改为导入MsalBroadcastService，同时从MSAL浏览器依赖包中导入EventType（事件类型枚举）、EventMessage（事件消息结构），配合RxJS的filter操作符做事件筛选即可。在组件构造函数中，将原来注入的BroadcastService替换为MsalBroadcastService。
• 重写订阅逻辑
  v2版本的MsalBroadcastService不支持传入字符串事件名调用subscribe的用法，它暴露了msalSubject$这个RxJS可观察流，所有MSAL生命周期事件都会推送到这个流中，你需要先筛选出目标事件再执行业务逻辑。

你提供的v1版本代码迁移后的完整写法参考：

import { Component, OnDestroy } from '@angular/core';
import { MsalBroadcastService } from '@azure/msal-angular';
import { EventMessage, EventType } from '@azure/msal-browser';
import { filter, takeUntil } from 'rxjs/operators';
import { Subject } from 'rxjs';

@Component({
  // 你的组件元数据配置
})
export class YourComponent implements OnDestroy {
  private readonly destroy$ = new Subject<void>();

  constructor(private msalBroadcastService: MsalBroadcastService) {
    this.msalBroadcastService.msalSubject$
      .pipe(
        filter((msg: EventMessage) => {
          return msg.eventType === EventType.LOGIN_SUCCESS || msg.eventType === EventType.LOGIN_FAILURE;
        }),
        takeUntil(this.destroy$)
      )
      .subscribe((result: EventMessage) => {
        const payload = result.payload;
        switch (result.eventType) {
          case EventType.LOGIN_SUCCESS:
            // 原msal:loginSuccess回调中的业务逻辑写在这里
            break;
          case EventType.LOGIN_FAILURE:
            // 原msal:loginFailure回调中的业务逻辑写在这里
            break;
        }
      });
  }

  ngOnDestroy(): void {
    this.destroy$.next(undefined);
    this.destroy$.complete();
  }
}

注意事项：

1. v2版本不再使用msal:loginSuccess、msal:loginFailure这类硬编码字符串做事件标识，所有事件都定义在EventType枚举中，可避免字符串拼写错误，v1版本其余广播事件都可在该枚举中找到对应值。
2. 必须处理订阅取消逻辑，否则会造成内存泄漏，示例中用takeUntil配合组件销毁钩子是Angular开发中的通用最佳实践。

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