使用@azure/msal-angular 3.0.0-alpha.2时loginRedirect无法触发LOGIN_SUCCESS事件

核心原因 #

使用loginRedirect()时，登录成功后页面会完全刷新，原来组件中订阅msalBroadcastService.msalSubject$的实例已被销毁，自然无法触发后续订阅回调。而loginPopup()是在当前页面上下文完成登录，组件实例始终存在，所以能正常捕获事件。

解决办法 #

1. 全局订阅登录事件 #

将登录成功的订阅逻辑移到AppComponent（或其他全局初始化的根组件）中，页面刷新后，新的组件实例会重新订阅事件，就能捕获到重定向后的LOGIN_SUCCESS事件：

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

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

  constructor(private msalBroadcastService: MsalBroadcastService) {}

  ngOnInit(): void {
    this.msalBroadcastService.msalSubject$
      .pipe(
        filter((msg: EventMessage) => msg.eventType === EventType.LOGIN_SUCCESS),
        takeUntil(this._destroying$)
      )
      .subscribe((result: EventMessage) => {
        console.log('登录成功:', result);
        // 这里处理登录后的逻辑，比如获取用户信息、初始化应用数据等
      });
  }

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

2. 在目标页面（home组件）中处理 #

因为重定向后直接进入home页面，也可以在HomeComponent中通过MsalService直接获取登录结果，或者订阅事件：

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

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html'
})
export class HomeComponent implements OnInit, OnDestroy {
  private _destroying$ = new Subject<void>();

  constructor(private msalService: MsalService, private msalBroadcastService: MsalBroadcastService) {}

  ngOnInit(): void {
    // 方式一：直接获取当前登录账户
    const account = this.msalService.instance.getActiveAccount();
    if (account) {
      console.log('当前登录账户:', account);
      // 处理逻辑
    }

    // 方式二：订阅事件（确保组件初始化时能捕获到）
    this.msalBroadcastService.msalSubject$
      .pipe(
        filter((msg: EventMessage) => msg.eventType === EventType.LOGIN_SUCCESS),
        takeUntil(this._destroying$)
      )
      .subscribe((result: EventMessage) => {
        console.log('登录成功:', result);
      });
  }

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

3. 检查重定向URL格式 #

注意你配置的重定向URL是localhost://4200/home，正确格式应该是http://localhost:4200/home或https://localhost:4200/home，请确保Azure应用注册和Angular配置中的URL完全一致，格式错误可能导致事件触发异常。

内容的提问来源于stack exchange，提问作者mahesh p.v