Angular 14集成MSALv2登录后出现多次重定向问题求助

问题场景 #

• 用户未登录时访问/profile/edit/123
• 被引导至本地登录页，显示登录流程及无权限说明
• 点击登录按钮后，重定向至微软认证页面完成登录
• 登录成功后，需先两次跳转至本地登录页，才最终回到目标路由/profile/edit/123

问题原因 #

1. 自定义守卫CanActivateGuard仅返回false而未主动处理路由跳转，导致路由导航失败后重复触发守卫逻辑
2. 登录成功后，MSAL的重定向回调与Angular路由守卫的拦截逻辑冲突，重复触发登录页跳转
3. 登录页未在初始化时检查用户登录状态，导致已登录状态下仍停留登录页

修复方案 #

1. 修改CanActivateGuard，主动处理未登录时的路由跳转 #

修改can-activate.guard.ts，当检测到用户未登录时，直接跳转到登录页并存储目标路由，避免返回false触发重复拦截：

// can-activate.guard.ts
import { Injectable } from '@angular/core';
import {
  ActivatedRouteSnapshot,
  CanActivate,
  Router,
  RouterStateSnapshot,
} from '@angular/router';
import { MsalBroadcastService, MsalService } from '@azure/msal-angular';
import { InteractionStatus } from '@azure/msal-browser';
import { filter, Observable, of, switchMap } from 'rxjs';
import { LoginService } from './services/login.service';

@Injectable({ providedIn: 'root' })
export class CanActivateGuard implements CanActivate {
  constructor(
    private msalService: MsalService,
    private loginService: LoginService,
    private router: Router,
    private msalBroadcastService: MsalBroadcastService
  ) {}

  canActivate(
    _route: ActivatedRouteSnapshot,
    state: RouterStateSnapshot
  ): Observable<boolean> | Promise<boolean> | boolean {
    return this.msalBroadcastService.inProgress$.pipe(
      filter((status: InteractionStatus) => status === InteractionStatus.None),
      switchMap(() => {
        if (this.msalService.instance.getAllAccounts().length > 0) {
          return of(true);
        }
        // 存储目标路由并主动跳转到登录页
        this.loginService.redirectUrl = state.url;
        this.router.navigate(['/login']);
        return of(false);
      })
    );
  }
}

2. 修改LoginComponent，初始化时检查登录状态 #

在LoginComponent的ngOnInit中添加登录状态检查，若已登录则直接跳转到目标路由：

// login.component.ts
import { Component, OnInit } from '@angular/core';
import { LoginService } from '../services/login.service';
import { Router } from '@angular/router';

@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.css']
})
export class LoginComponent implements OnInit {
  constructor(private loginService: LoginService, private router: Router) {}

  ngOnInit(): void {
    // 初始化时检查是否已登录，若已登录则跳转到目标路由
    this.loginService.updateLoggedInStatus();
    if (this.loginService.isLoggedIn()) {
      const redirectUrl = this.loginService.redirectUrl || '/home';
      this.router.navigate([redirectUrl]);
    }
  }

  login() {
    this.loginService.login();
  }
}

3. 优化LoginService的登录成功回调 #

在LoginService的ngOnInit中，监听LOGIN_SUCCESS事件，登录成功后主动触发路由跳转：

// login.service.ts（修改ngOnInit部分）
ngOnInit(): void {
  this.msalBroadcastService.msalSubject$
    .pipe(
      filter((msg: EventMessage) => msg.eventType === EventType.LOGIN_SUCCESS)
    )
    .subscribe((result: EventMessage) => {
      console.log(result);
      // 登录成功后跳转到存储的目标路由
      const redirectUrl = this.redirectUrl || '/home';
      this.router.navigate([redirectUrl]);
    });
}

4. 调整路由初始化导航设置 #

确保AppRoutingModule中的initialNavigation设置为enabledBlocking，避免MSAL重定向与Angular路由初始化冲突：

// app-routing.module.ts（修改RouterModule.forRoot配置）
RouterModule.forRoot(routes, {
  initialNavigation: 'enabledBlocking',
})

验证效果 #

修改完成后，重新测试登录流程：

1. 未登录访问/profile/edit/123，直接跳转到登录页
2. 点击登录按钮，跳转微软认证页完成登录
3. 登录成功后直接跳转到目标路由/profile/edit/123，无重复跳转登录页的情况

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