Så här konfigurerar @azure/msal-angular du för att använda routerns navigeringsfunktion för navigering på klientsidan

Som standard, när MSAL.js behöver navigera från en sida i programmet till en annan, tilldelar den om window.location, vilket leder till en fullständig omdirigering av ramen till den andra sidan och gör att programmet renderas om. Om du använder Angular Router kan detta vara oläsligt eftersom routern aktiverar navigering på "klientsidan" och visar eller döljer endast delar av sidan efter behov.

För närvarande finns det ett scenario där MSAL.js navigerar från en sida i programmet till en annan. Om ditt program gör alla följande saker, fortsätt läsa:

• Ditt program använder omdirigeringsflödet i stället för popup-flödet för att logga in
• PublicClientApplication har konfigurerats med auth.navigateToLoginRequestUrl: true (standard)
• Ditt program har sidor som kan anropa loginRedirect/acquireTokenRedirect med en delad redirectUri, dvs. du anropar loginRedirect från http://localhost/protected med en redirectUri på http://localhost

Om programmet gör allt ovan kan du åsidosätta den metod som MSAL använder för att navigera genom att MsalCustomNavigationClient importera och anropa setNavigationClient.

Obs! På grund av en säkerhetskorrigering MsalCustomNavigationClient använder inte Angular Router för att navigera på klientsidan när navigateToLoginRequestUrl är inställt på true och hantering av omdirigeringar. Det här är ett känt problem som kommer att åtgärdas i en framtida version.

Exempel på implementering

Exemplet nedan visar hur du implementerar detta när du använder Angular Router. Mer information om Angular Router finns här, och du hittar en fullständig exempelapp som implementerar detta för Angular här.

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