Angular 15集成MSAL：实现打开站点即时跳转微软登录页

以下是几种可行的解决方法，可根据项目情况选择：

方法一：应用初始化阶段提前检查认证状态 #

在main.ts中，应用启动后立即校验用户登录状态，未登录则直接触发登录跳转，从根源避免组件渲染：

import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app/app.component';
import { provideMsal, MsalService } from '@azure/msal-angular';
import { BrowserCacheLocation } from '@azure/msal-browser';

bootstrapApplication(AppComponent, {
  providers: [
    provideMsal({
      auth: {
        clientId: '你的客户端ID',
        authority: '你的认证机构地址',
        redirectUri: window.location.origin,
      },
      cache: {
        cacheLocation: BrowserCacheLocation.LocalStorage,
      }
    }),
    // 其他必要提供者
  ]
}).then(appRef => {
  const msalService = appRef.injector.get(MsalService);
  const account = msalService.instance.getAllAccounts()[0];
  
  if (!account) {
    // 立即跳转微软登录页
    msalService.loginRedirect();
  }
});

方法二：根组件中拦截未认证请求 #

修改AppComponent，在组件初始化时完成认证检查，未登录则触发跳转并隐藏应用内容：

1. 组件逻辑（app.component.ts） #

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 {
  isAuthenticated = false;

  constructor(
    private msalService: MsalService,
    private router: Router
  ) {}

  ngOnInit(): void {
    this.msalService.instance.handleRedirectPromise().then(() => {
      const account = this.msalService.instance.getAllAccounts()[0];
      this.isAuthenticated = !!account;

      if (!this.isAuthenticated) {
        // 触发登录跳转
        this.msalService.loginRedirect();
        // 清空当前路由导航，阻止后续渲染
        this.router.navigate([]);
      }
    });
  }
}

2. 模板内容（app.component.html） #

通过条件渲染确保未认证时不显示任何应用内容：

<div *ngIf="isAuthenticated; else redirecting">
  <router-outlet></router-outlet>
</div>

<ng-template #redirecting>
  <!-- 可选：显示跳转提示，也可留空 -->
  <div class="login-redirect">正在跳转登录...</div>
</ng-template>

方法三：优化MsalGuard路由配置 #

给受保护路由的MsalGuard添加明确配置，强制使用重定向模式并同步完成认证检查：

import { Routes } from '@angular/router';
import { SomeProtectedComponent } from './some-protected.component';
import { MsalGuard } from '@azure/msal-angular';
import { InteractionType } from '@azure/msal-browser';

const routes: Routes = [
  {
    path: 'protected-component',
    component: SomeProtectedComponent,
    canActivate: [MsalGuard],
    data: {
      msalGuardConfig: {
        interactionType: InteractionType.Redirect,
        authRequest: {
          scopes: ['user.read'] // 根据需求配置权限范围
        }
      }
    }
  },
  // 其他路由
];

这些方法的核心思路都是在应用或组件渲染前完成认证状态校验，彻底避免未认证时短暂显示受保护页面的问题。

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