Come configurare @azure/msal-angular per l'uso della funzione di navigazione del router per la navigazione sul lato client

Per impostazione predefinita, quando MSAL.js deve passare da una pagina dell'applicazione a un'altra, riassegna window.location, provocando un reindirizzamento dell'intero frame all'altra pagina e causando il nuovo rendering dell'applicazione. Se si usa il router Angular, questo può essere indesiderato perché il router abilita lo spostamento sul lato client e mostra o nasconde solo le parti della pagina in base alle esigenze.

Attualmente esiste uno scenario in cui MSAL.js passerà da una pagina dell'applicazione a un'altra. Se l'applicazione esegue tutte le operazioni seguenti, continuare a leggere:

• L'applicazione usa il flusso di reindirizzamento, invece del flusso popup, per accedere
• PublicClientApplication è configurato con auth.navigateToLoginRequestUrl: true (impostazione predefinita)
• L'applicazione ha pagine che possono chiamare loginRedirect/acquireTokenRedirect con un oggetto condiviso redirectUri , ad esempio si chiama loginRedirect da http://localhost/protected con un redirectUri di http://localhost

Se l'applicazione esegue tutte le operazioni precedenti, è possibile eseguire l'override del metodo usato da MSAL per spostarsi importando MsalCustomNavigationClient e chiamando setNavigationClient.

NOTA: a causa di una correzione di sicurezza, l'oggetto MsalCustomNavigationClient non usa Angular Router per spostarsi sul lato client quando navigateToLoginRequestUrl è impostato su true e gestisce i reindirizzamenti. Si tratta di un problema noto che verrà risolto in una versione futura.

Implementazione di esempio

L'esempio seguente illustra come implementare questa operazione quando si usa Angular Router. Altre informazioni sul router Angular sono disponibili qui ed è possibile trovare un'app di esempio completa che implementa questa opzione per Angular qui.

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