Angular中如何在微软登录重定向完成后切换到受限页面组件

由于loginRedirect()是重定向式登录，调用后当前组件的后续代码会被中断执行，所以不能直接在login函数里添加路由跳转逻辑。以下是两种可行的实现方式：

方式一：调用loginRedirect时指定跳转目标 #

直接在登录方法中通过配置参数指定登录成功后的跳转地址：

修改public-page.component.ts的login函数：

login() {
  this.msalService.loginRedirect({
    redirectUri: '/restricted-page' // 明确指定登录成功后跳转至该路径
  });
}

注意：需要确保你的MSAL全局配置中，已将/restricted-page添加到允许的redirectUri列表中，否则会出现授权错误。

方式二：通过MSAL登录成功事件监听跳转 #

在应用根组件中监听MSAL的重定向回调，登录成功后触发路由跳转：

在app.component.ts中添加如下逻辑：

import { MsalService } from '@azure/msal-angular';
import { Router } from '@angular/router';

constructor(private msalService: MsalService, private router: Router) {
  // 监听重定向登录的结果
  this.msalService.handleRedirectObservable().subscribe({
    next: (authResponse) => {
      if (authResponse) {
        // 验证通过后跳转至restricted-page
        this.router.navigate(['/restricted-page']);
      }
    },
    error: (err) => {
      console.error('登录失败:', err);
    }
  });
}

额外注意点 #

• 你路由配置中的MaslGuard是笔误，正确应为MsalGuard，需确保该守卫能正常验证用户的认证状态，避免未登录用户直接访问restricted-page。
• 如果已在MSAL全局配置中设置了defaultRedirectUri，可直接复用该配置，无需在loginRedirect中重复指定redirectUri。

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