Hoe configureert u @azure/msal-angular om de navigatiefunctie van uw router te gebruiken voor navigatie aan clientzijde

Standaard wordt window.location opnieuw toegewezen wanneer MSAL.js van de ene pagina in uw toepassing naar een andere moet navigeren, wat een volledige frame-omleiding naar de andere pagina veroorzaakt en ertoe leidt dat uw toepassing opnieuw wordt gerenderd. Als u de Angular-router gebruikt, kan dit onherstelbaar zijn omdat de router navigatie aan de clientzijde inschakelt en alleen de onderdelen van de pagina indien nodig weergeeft of verbergt.

Er is momenteel één scenario waarin MSAL.js van de ene pagina in uw toepassing naar een andere navigeert. Als uw toepassing alle volgende dingen doet, gaat u verder met lezen:

• Uw toepassing gebruikt de omleidingsstroom in plaats van de pop-upstroom om u aan te melden
• PublicClientApplication is geconfigureerd met auth.navigateToLoginRequestUrl: true (standaard)
• Uw toepassing heeft pagina's die mogelijk loginRedirect/acquireTokenRedirect aanroepen met een gedeelde redirectUri, d.w.z. u roept loginRedirect aan vanuit http://localhost/protected met een redirectUri van http://localhost

Als uw toepassing al het bovenstaande doet, kunt u de methode overschrijven die MSAL gebruikt om te navigeren door MsalCustomNavigationClient te importeren en setNavigationClient aan te roepen.

OPMERKING: Vanwege een beveiligingscorrectie zal de MsalCustomNavigationClient de Angular Router niet gebruiken om client-side te navigeren wanneer navigateToLoginRequestUrl op true is ingesteld en redirects worden afgehandeld. Dit is een bekend probleem dat in een toekomstige release wordt opgelost.

Voorbeeld van implementatie

In het onderstaande voorbeeld ziet u hoe u dit implementeert wanneer u de Angular Routergebruikt. Meer informatie over de Angular Router vindt u hier en u vindt hier een volledige voorbeeld-app die dit voor Angular implementeert.

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