Jak skonfigurować @azure/msal-angular, aby używać funkcji navigate routera do nawigacji po stronie klienta

Domyślnie, gdy MSAL.js musi przechodzić z jednej strony w aplikacji do innej, spowoduje ponowne przypisanie window.location, powodując przekierowanie pełnej ramki do drugiej strony i spowodowanie ponownego renderowania aplikacji. Jeśli używasz routera Angular, może to być nieuniknione, ponieważ router włącza nawigację po stronie klienta i wyświetla lub ukrywa tylko części strony w razie potrzeby.

Obecnie istnieje jeden scenariusz, w którym MSAL.js będzie przechodzić z jednej strony w aplikacji do innej. Jeśli aplikacja wykonuje wszystkie następujące czynności, kontynuuj czytanie:

• Aplikacja używa przepływu przekierowania zamiast przepływu wyskakującego okna do logowania
• PublicClientApplication jest konfigurowany przy użyciu auth.navigateToLoginRequestUrl: true (ustawienie domyślne)
• Aplikacja zawiera strony, które mogą wywoływać loginRedirect/acquireTokenRedirect przy użyciu współdzielonego redirectUri, tzn. wywołujesz loginRedirect z http://localhost/protected z redirectUri równym http://localhost

Jeśli aplikacja wykonuje wszystkie powyższe czynności, możesz zastąpić metodę MSAL używaną do nawigowania, importując metodę MsalCustomNavigationClient i wywołując metodę setNavigationClient.

UWAGA: Ze względu na poprawkę zabezpieczeń usługa MsalCustomNavigationClient Angular nie będzie używać platformy Angular Router do nawigowania po stronie klienta, gdy navigateToLoginRequestUrl jest ustawiona na wartość true i obsługuje przekierowania. Jest to znany problem, który zostanie rozwiązany w przyszłej wersji.

Przykładowa implementacja

W poniższym przykładzie pokazano, jak zaimplementować to podczas korzystania z platformy Angular Router. Więcej informacji na temat routera angular można znaleźć tutaj i można znaleźć pełną przykładową aplikację, która implementuje tę funkcję dla platformy Angular tutaj.

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
  }
}