如何阻止msal-angular自动重定向至登录页面？

1. 调整路由与守卫行为 #

修改路由配置，将默认路径指向自定义登录页，并配置MsalGuard在未登录时重定向到登录页，而非自动触发微软登录：

const routes: Routes = [
  {
    path: '',
    redirectTo: 'login',
    pathMatch: 'full'
  },
  {
    path: 'login',
    component: LoginComponent
  },
  {
    path: 'home',
    component: HomeComponent,
    canActivate: [MsalGuard],
    data: {
      msalGuardConfig: {
        // 禁用Guard自动发起登录请求，改为重定向到自定义登录页
        loginFailedRoute: '/login'
      }
    }
  }
];

2. 手动初始化MSAL（移除MsalRedirectComponent） #

在AppComponent中手动初始化MSAL，仅处理登录回调，不触发自动登录：

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

constructor(private authService: MsalService) {}

ngOnInit(): void {
  this.authService.initialize().subscribe({
    next: () => {
      // 仅处理登录完成后的重定向回调，不会触发自动登录
      this.authService.handleRedirectObservable().subscribe();
    },
    error: err => console.error('MSAL初始化失败', err)
  });
}

3. 保留自定义登录按钮逻辑 #

LoginComponent中的登录方法保持不变，确保仅在用户点击按钮时触发微软认证：

login(): void {
  if (this.msalGuardConfig.authRequest) {
    this.authService.loginRedirect({...this.msalGuardConfig.authRequest} as RedirectRequest);
  } else {
    this.authService.loginRedirect();
  }
}

4. 检查MSAL全局配置 #

确保app.module.ts中的MSAL配置未开启自动登录相关选项：

MsalModule.forRoot(
  new PublicClientApplication({
    auth: {
      clientId: '你的客户端ID',
      authority: 'https://login.microsoftonline.com/你的租户ID',
      redirectUri: 'http://localhost:4200/home' // 登录成功后跳转页
    },
    cache: {
      cacheLocation: BrowserCacheLocation.LocalStorage
    }
  }),
  {
    interactionType: InteractionType.Redirect,
    authRequest: { /* 你的默认认证请求配置 */ }
  },
  {
    interactionType: InteractionType.Redirect
  }
)

关键说明 #

• 移除MsalRedirectComponent后，通过手动初始化MSAL完全控制登录触发时机。
• 修改MsalGuard的loginFailedRoute配置，让未登录用户被引导到自定义登录页，而非自动跳转到微软登录。
• handleRedirectObservable仅处理登录完成后的回调逻辑，不会主动触发登录流程。

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