MSAL Angular 中的事件

在开始之前，请确保了解如何初始化应用程序对象。

@azure/msal-angular 使用公开 @azure/msal-browser的事件系统，它发出与身份验证和 MSAL 相关的事件，并可用于更新 UI、显示错误消息等。

在应用中使用事件

@azure/msal-angular 中的事件由 MsalBroadcastService 管理，并且可通过订阅 MsalBroadcastService 上的 msalSubject$ 可观察对象来获取。

下面是一个示例，说明如何在您的应用程序中处理已发出的事件：

import { MsalBroadcastService } from '@azure/msal-angular';
import { EventMessage, EventType } from '@azure/msal-browser';

export class AppComponent implements OnInit, OnDestroy {
  private readonly _destroying$ = new Subject<void>();

  constructor(
    //...
    private msalBroadcastService: MsalBroadcastService
  ) {}

  ngOnInit(): void {
    this.msalBroadcastService.msalSubject$
      .pipe(
        // Optional filtering of events.
        filter((msg: EventMessage) => msg.eventType === EventType.LOGIN_SUCCESS), 
        takeUntil(this._destroying$)
      )
      .subscribe((result: EventMessage) => {
        // Do something with the result
      });
  }

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

请注意，为避免编译错误，您可能需要将 result.payload 强制转换为特定类型。有效负载类型将取决于事件，可在此处的文档中找到。

ngOnInit(): void {
  this.msalBroadcastService.msalSubject$
    .pipe(
      filter((msg: EventMessage) => msg.eventType === EventType.LOGIN_SUCCESS),
    )
    .subscribe((result: EventMessage) => {
      // Casting payload as AuthenticationResult to access account
      const payload = result.payload as AuthenticationResult;
      this.authService.instance.setActiveAccount(payload.account);
    });
}

有关使用事件的完整示例，请参阅此处的示例。

事件表

有关 EventMessage 对象的更多信息，包括 @azure/msal-browser 当前发出的事件完整列表（包括说明和相关负载），请参阅此处的文档。

使用事件处理错误

由于 EventMessage 中的 EventError 被定义为 AuthError | Error | null，因此在访问该错误的特定属性之前，应先验证该错误是否属于正确的类型。

请参阅下面的示例，了解如何将错误转换为 AuthError 以避免 TypeScript 错误：

import { MsalBroadcastService } from '@azure/msal-angular';
import { EventMessage, EventType } from '@azure/msal-browser';

export class AppComponent implements OnInit, OnDestroy {
  private readonly _destroying$ = new Subject<void>();

  constructor(
    //...
    private msalBroadcastService: MsalBroadcastService
  ) {}

  ngOnInit(): void {
    this.msalBroadcastService.msalSubject$
      .pipe(
        // Optional filtering of events
        filter((msg: EventMessage) => msg.eventType === EventType.LOGIN_FAILURE), 
        takeUntil(this._destroying$)
      )
      .subscribe((result: EventMessage) => {
        if (result.error instanceof AuthError) {
          // Do something with the error
        }
      });
  }

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

还可以在我们的 MSAL Angular B2C 示例中找到错误处理示例。

在选项卡和窗口之间同步登录状态

如果你希望在用户从其他选项卡或窗口登录或退出你的应用时更新界面，可以订阅 ACCOUNT_ADDED 和 ACCOUNT_REMOVED 事件。有效负载将是被添加或移除的 AccountInfo 对象。

import { MsalService, MsalBroadcastService } from '@azure/msal-angular';
import { EventMessage, EventType } from '@azure/msal-browser';

export class AppComponent implements OnInit, OnDestroy {
  private readonly _destroying$ = new Subject<void>();

  constructor(
    //...
    private authService: MsalService,
    private msalBroadcastService: MsalBroadcastService
  ) {}

  ngOnInit(): void {
    this.authService.instance.enableAccountStorageEvents(); // Register the storage listener that will be emitting the events
    this.msalBroadcastService.msalSubject$
      .pipe(
        // Optional filtering of events
        filter((msg: EventMessage) => msg.eventType === EventType.ACCOUNT_ADDED || msg.eventType === EventType.ACCOUNT_REMOVED), 
        takeUntil(this._destroying$)
      )
      .subscribe((result: EventMessage) => {
        if (this.authService.msalInstance.getAllAccounts().length === 0) {
          // Account logged out in a different tab, redirect to homepage
          window.location.pathname = "/";
        } else {
          // Update UI to show user is signed in. result.payload contains the account that was logged in
        }
      });
  }

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

也可在我们的示例中找到完整示例。

inProgress$ 可观察对象

inProgress$可观测对象也由MsalBroadcastService该对象处理，当应用程序需要知道交互状态时，应订阅该对象，特别是检查交互是否已完成。建议在执行涉及用户账户的功能之前，检查交互状态是否为 InteractionStatus.None。

注意，订阅 inProgress$ 可观察对象时，最后一个/最近的 InteractionStatus 也可用。

请参阅以下示例了解其用法。也可在我们的示例中找到完整示例。可在此处找到交互状态的完整列表。

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

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

  constructor(
    private msalBroadcastService: MsalBroadcastService
  ) {}

  ngOnInit(): void {
    this.msalBroadcastService.inProgress$
      .pipe(
        // Filtering for all interactions to be completed
        filter((status: InteractionStatus) => status === InteractionStatus.None),
        takeUntil(this._destroying$)
      )
      .subscribe(() => {
        // Do something related to user accounts or UI here
      })
  }

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

可选 `MsalBroadcastService` 配置

MsalBroadcastService 可观察对象可配置为在订阅时重播过去的事件。默认情况下，在订阅 MsalBroadcastService 后发出的事件是可用的。可能存在需要订阅前事件的实例。通过为 MsalBroadcastService 提供配置，并将 eventsToReplay 参数设置为某个数字，订阅后即可获得相应数量的历史事件。

有关重播事件的详细信息，请参阅此处有关 ReplaySubjects 的 RxJS 文档。

MsalBroadcastService可以在app.module.ts文件中配置，如下所示：

// app.module.ts
import { NgModule } from '@angular/core';
import { HTTP_INTERCEPTORS } from '@angular/common/http';
import { AppComponent } from './app.component';
import { MsalModule, MsalService, MsalGuard, MsalInterceptor, MsalBroadcastService, MsalRedirectComponent, MSAL_BROADCAST_CONFIG } from "@azure/msal-angular"; // Import MsalBroadcastService and MSAL_BROADCAST_CONFIG here
import { PublicClientApplication, InteractionType, BrowserCacheLocation } from "@azure/msal-browser";

@NgModule({
    imports: [
        MsalModule.forRoot( new PublicClientApplication({ // MSAL Configuration
            auth: {
                clientId: "clientid",
                authority: "https://login.microsoftonline.com/common/",
                redirectUri: "http://localhost:4200/",
                postLogoutRedirectUri: "http://localhost:4200/",
                navigateToLoginRequestUrl: true
            },
            cache: {
                cacheLocation : BrowserCacheLocation.LocalStorage,
            },
            system: {
                loggerOptions: {
                    loggerCallback: () => {},
                    piiLoggingEnabled: false
                }
            }
        }), {
            interactionType: InteractionType.Popup, // MSAL Guard Configuration
            authRequest: {
              scopes: ['user.read']
            },
            loginFailedRoute: "/login-failed" 
        }, {
            interactionType: InteractionType.Redirect, // MSAL Interceptor Configuration
            protectedResourceMap
        })
    ],
    providers: [
        {
            provide: HTTP_INTERCEPTORS,
            useClass: MsalInterceptor,
            multi: true
        },
        {
          provide: MSAL_BROADCAST_CONFIG, // Add configuration to providers here
          useValue: {
            eventsToReplay: 2 // Set how many events you want to replay when subscribing
          }
        },
        MsalGuard,
        MsalBroadcastService // Ensure the MsalBroadcastService is provided
    ],
    bootstrap: [AppComponent, MsalRedirectComponent]
})
export class AppModule {}

反馈

此页面是否有帮助？

Last updated on 2026-07-07