So konfigurieren @azure/msal-angular Sie die Navigationsfunktion Ihres Routers für die clientseitige Navigation

Standardmäßig weist MSAL.js, wenn es von einer Seite in Ihrer Anwendung zu einer anderen navigieren muss, window.location neu zu, was zu einer vollständigen Umleitung des Frames auf die andere Seite führt, wodurch Ihre Anwendung neu gerendert wird. Wenn Sie den Angular-Router verwenden, kann dies möglicherweise unerwünscht sein, da der Router clientseitige Navigation ermöglicht und nur die erforderlichen Teile der Seite je nach Bedarf ein- oder ausblendet.

Derzeit gibt es ein Szenario, in dem MSAL.js von einer Seite in Ihrer Anwendung zu einer anderen navigieren. Wenn Ihre Anwendung alle folgenden Aktionen ausführt, lesen Sie weiter:

• Ihre Anwendung verwendet den Umleitungsfluss anstelle des Popupflusses, um sich anzumelden.
• PublicClientApplication ist mit auth.navigateToLoginRequestUrl: true (Standard) konfiguriert.
• Ihre Anwendung hat Seiten, die loginRedirect/acquireTokenRedirect mit einer gemeinsamen redirectUri aufrufen können, d. h. Sie rufen loginRedirect von http://localhost/protected mit einer redirectUri von http://localhost auf

Wenn Ihre Anwendung alle oben genannten Schritte ausführt, können Sie die Methode MSAL zum Navigieren überschreiben, indem Sie die MsalCustomNavigationClient Datei importieren und aufrufen setNavigationClient.

HINWEIS: Aufgrund einer Sicherheitskorrektur verwendet MsalCustomNavigationClient das Angular-Router nicht für die clientseitige Navigation, wenn navigateToLoginRequestUrl auf „true“ festgelegt ist und Umleitungen verarbeitet werden. Dies ist ein bekanntes Problem, das in einer zukünftigen Version behoben werden wird.

Beispielimplementierung

Im folgenden Beispiel wird gezeigt, wie Sie dies bei Verwendung von Angular Routerimplementieren. Weitere Informationen zum Angular-Router finden Sie hier, und Sie finden hier eine vollständige Beispiel-App, die dies für Angular implementiert.

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