MSAL Angular 中的错误

BrowserAuthErrors

交互进行中

错误消息：交互当前正在进行中。 请确保在调用交互式 API 之前已完成此交互。

如果在调用一个交互式 API（loginPopup、loginRedirect、acquireTokenPopup、acquireTokenRedirect）时另一个交互式 API 仍在运行，则会引发此错误。 登录和 acquireToken API 是异步的，因此你需要确保生成的承诺已得到解决，然后才能调用另一个承诺。

在 @azure/msal-angular 2 种常见情况下，可能会出现这种情况：

  1. 应用程序未正确处理重定向。 然后，当应用或用户尝试调用交互式 API 时，将发生此错误。
  2. 应用程序正在调用上述 API 之一，而无需先检查交互是否已在其他位置进行。

重定向必须通过使用MsalRedirectComponent或调用handleRedirectObservable()来处理。 未使用这两种方法之一显式处理重定向将导致上述错误。 有关这两种方法的详细信息，请参阅 此处 的重定向文档。

此外，任何交互应在订阅 inProgress$ 可观察对象并筛选为 InteractionStatus.None 后进行。 在另一个交互尚未完成时尝试进行交互是不受支持的，并将导致上述错误。 检查 InteractionStatus.None 可确保不会发生这种情况。 有关详细信息，请参阅 我们的事件文档 。

有关此错误的详细信息，请参阅 @azure/msal-browser 错误文档 。

❌ 当另一个组件已调用正在进行中的交互式 API 时，以下示例将引发此错误：

import { Component, OnInit } from '@angular/core';
import { MsalService, MsalBroadcastService, InteractionStatus } from '@azure/msal-angular';
import { filter } from 'rxjs/operators';

@Component()
export class ExampleComponent implements OnInit {

  constructor(
    private msalBroadcastService: MsalBroadcastService,
    private authService: MsalService
  ) {}

  ngOnInit(): void {
    this.authService.loginRedirect();
  }

✔️ 若要修复前面的示例，请在调用 loginRedirect之前检查是否有其他交互正在进行：

import { Component, OnInit } from '@angular/core';
import { InteractionStatus } from '@azure/msal-browser';
import { MsalService, MsalBroadcastService } from '@azure/msal-angular';
import { filter } from 'rxjs/operators';

@Component()
export class ExampleComponent implements OnInit {

  constructor(
    private msalBroadcastService: MsalBroadcastService,
    private authService: MsalService
  ) {}

  ngOnInit(): void {
    this.msalBroadcastService.inProgress$
      .pipe(
        filter((status: InteractionStatus) => status === InteractionStatus.None),
      )
      .subscribe(() => {
        this.authService.loginRedirect();
      })
  }

故障排除步骤

  • 启用详细日志记录 并跟踪事件的顺序。 验证在另一个交互式 API 解决之前没有调用它。
  • 如果使用重定向流程，请确保 MsalRedirectComponet 已正确初始化，或者在每个可能会被重定向到的页面上调用 handleRedirectObservable。

如果无法确定引发此错误的原因，请 打开问题 并准备共享以下信息：

  • 详细日志
  • 可用于重现问题的示例应用和/或代码片段
  • 刷新页面。 错误是否消失？
  • 在新选项卡中打开应用程序。错误是否消失？
  • Last updated on