Cara mengonfigurasi @azure/msal-angular untuk menggunakan fungsi navigasi router Anda untuk navigasi sisi klien

Secara bawaan, saat MSAL.js perlu menavigasi dari satu halaman di aplikasi Anda ke halaman lain, MSAL.js akan menetapkan ulang window.location, sehingga terjadi pengalihan bingkai penuh ke halaman lain dan aplikasi Anda dirender ulang. Jika Anda menggunakan Router Angular, ini mungkin tidak dapat dipastikan karena Router memungkinkan navigasi "sisi klien" dan menunjukkan atau menyembunyikan hanya bagian halaman seperlunya.

Saat ini ada satu skenario di mana MSAL.js akan menavigasi dari satu halaman di aplikasi Anda ke halaman lainnya. Jika aplikasi Anda melakukan semua hal berikut, lanjutkan membaca:

• Aplikasi Anda menggunakan alur pengalihan, alih-alih alur popup, untuk masuk
• PublicClientApplication dikonfigurasi dengan auth.navigateToLoginRequestUrl: true (default)
• Aplikasi Anda memiliki halaman yang dapat memanggil loginRedirect/acquireTokenRedirect dengan berbagi redirectUri yaitu Anda memanggil loginRedirect dari http://localhost/protected dengan redirectUri http://localhost

Jika aplikasi Anda melakukan semua hal di atas, Anda dapat mengambil alih metode yang digunakan MSAL untuk menavigasi dengan mengimpor MsalCustomNavigationClient dan memanggil setNavigationClient.

CATATAN: Karena perbaikan keamanan, MsalCustomNavigationClient tidak akan menggunakan Angular Router untuk menavigasi sisi klien ketika navigateToLoginRequestUrl diatur ke true dan menangani pengalihan. Ini adalah masalah umum yang akan ditangani dalam rilis mendatang.

Contoh Implementasi

Contoh di bawah ini akan menunjukkan cara menerapkan ini saat menggunakan Angular Router. Informasi lebih lanjut tentang Angular Router dapat ditemukan di sini, dan Anda dapat menemukan aplikasi sampel lengkap yang mengimplementasikan ini untuk Angular di sini.

import { Component, OnInit, Inject } from '@angular/core';
import { Router } from '@angular/router';
import { Location } from '@angular/common';
import { MsalService, MsalBroadcastService, MSAL_GUARD_CONFIG, MsalGuardConfiguration, MsalCustomNavigationClient } from '@azure/msal-angular';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit, OnDestroy {

  constructor(
    @Inject(MSAL_GUARD_CONFIG) private msalGuardConfig: MsalGuardConfiguration,
    private authService: MsalService,
    private msalBroadcastService: MsalBroadcastService,
    private router: Router,
    private location: Location
  ) {
    const customNavigationClient = new MsalCustomNavigationClient(this.authService, this.router, this.location);
    this.authService.instance.setNavigationClient(customNavigationClient);
  }

  ngOnInit(): void {
    // Additional code
  }
}