如何用MSAL Angular实现Azure AD登录后跳转至用户请求的目标URL

问题原因 #

MSAL不会自动保存用户未认证时请求的目标URL，默认完成认证后会跳转到配置的redirectUri。要实现跳转至用户原本请求的页面，需要手动保存目标URL，并在认证成功后触发跳转。

具体解决方案 #

1. 在路由守卫中保存目标URL #

通过Angular的路由守卫（CanActivate）拦截未认证用户的路由请求，将用户原本要访问的URL存储到sessionStorage中：

import { Injectable } from '@angular/core';
import { CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot, Router } from '@angular/router';
import { MsalService } from '@azure/msal-angular';

@Injectable({
  providedIn: 'root'
})
export class AuthGuard implements CanActivate {
  constructor(private msalService: MsalService, private router: Router) {}

  canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean {
    const hasActiveAccount = this.msalService.instance.getAllAccounts().length > 0;

    if (!hasActiveAccount) {
      // 存储用户请求的目标URL
      sessionStorage.setItem('targetRedirectUrl', state.url);
      // 触发登录跳转
      this.msalService.loginRedirect();
      return false;
    }
    return true;
  }
}

2. 认证成功后跳转至目标URL #

在应用初始化时监听MSAL的登录回调，取出存储的目标URL并完成跳转，跳转后清除存储的URL避免重复触发：

import { Component, OnInit } from '@angular/core';
import { MsalService } from '@azure/msal-angular';
import { Router } from '@angular/router';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  constructor(private msalService: MsalService, private router: Router) {}

  ngOnInit(): void {
    this.msalService.instance.handleRedirectObservable().subscribe({
      next: (authResponse) => {
        if (authResponse) {
          const targetUrl = sessionStorage.getItem('targetRedirectUrl');
          if (targetUrl) {
            this.router.navigateByUrl(targetUrl);
            sessionStorage.removeItem('targetRedirectUrl');
          }
        }
      },
      error: (err) => {
        console.error('认证回调处理失败:', err);
      }
    });
  }
}

3. 注意事项 #

• 无需修改MSAL实例配置中的redirectUri，该值必须与Azure AD应用注册中配置的地址完全一致，否则认证会失败。
• 如果使用loginPopup替代loginRedirect，逻辑完全一致：先保存目标URL，弹窗登录成功后读取并跳转。
• 若需处理会话过期后重新登录的场景，该方案同样适用。

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