Kesalahan dalam MSAL Angular

BrowserAuthErrors

Interaksi sedang berlangsung

Pesan Kesalahan: Interaksi saat ini sedang berlangsung. Pastikan interaksi ini telah selesai sebelum memanggil API interaktif.

Kesalahan ini dilemparkan ketika API interaktif (loginPopup, loginRedirect, acquireTokenPopup, acquireTokenRedirect) dipanggil saat API interaktif lain masih berlangsung. API login dan acquireToken bersifat asinkron, jadi Anda perlu memastikan bahwa promise yang dihasilkan sudah resolve sebelum memanggil API lainnya.

Dalam @azure/msal-angular ada 2 skenario umum ketika hal ini dapat terjadi:

1. Aplikasi Anda tidak menangani pengalihan dengan benar. Kesalahan kemudian terjadi ketika aplikasi atau pengguna mencoba memanggil API interaktif.
2. Aplikasi Anda memanggil salah satu API di atas tanpa terlebih dahulu memeriksa apakah interaksi sudah berlangsung di tempat lain.

Pengalihan harus ditangani baik dengan MsalRedirectComponent atau dengan panggilan handleRedirectObservable(). Tidak menangani pengalihan secara eksplisit dengan salah satu dari dua pendekatan ini akan mengakibatkan kesalahan di atas. Lihat dokumen kami tentang pengalihan di sini untuk informasi selengkapnya tentang kedua pendekatan.

Selain itu, interaksi apa pun harus dilakukan setelah berlangganan ke observable inProgress$ dan melakukan pemfilteran untuk InteractionStatus.None. Mencoba interaksi saat yang lain sedang berlangsung tidak didukung dan akan mengakibatkan kesalahan di atas. Memeriksa adanya InteractionStatus.None adalah cara untuk memastikan hal ini tidak terjadi. Silakan lihat dokumen acara kami untuk detail selengkapnya.

Silakan lihat dokumen@azure/msal-browser kesalahan untuk informasi lebih lanjut tentang kesalahan ini.

❌ Contoh berikut akan melemparkan kesalahan ini ketika komponen lain telah memanggil API interaktif yang sedang berlangsung:

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();
  }

✔️ Untuk memperbaiki contoh sebelumnya, periksa apakah tidak ada interaksi lain yang sedang berlangsung sebelum memanggil 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();
      })
  }

Langkah Pemecahan Masalah

• Aktifkan pengelogan verbose dan lacak urutan peristiwa. Verifikasi bahwa API interaktif tidak dipanggil sebelum api lain diselesaikan.
• Jika menggunakan alur pengalihan, pastikan MsalRedirectComponet diinisialisasi dengan benar atau handleRedirectObservable dipanggil di setiap halaman yang mungkin dialihkan.

Jika Anda tidak dapat mengetahui mengapa kesalahan ini dilemparkan, silakan buka masalah dan bersiaplah untuk membagikan informasi berikut:

• Log verbose
• Contoh cuplikan aplikasi dan/atau kode yang dapat kita gunakan untuk mereproduksi masalah
• Refresh halaman. Apakah kesalahan hilang?
• Buka aplikasi Anda di tab baru. Apakah kesalahan hilang?