Como configurar @azure/msal-angular para usar a função de navegação do roteador para navegação do lado do cliente

Por padrão, quando o MSAL.js precisar navegar de uma página para outra no seu aplicativo, ele reatribuirá window.location, causando um redirecionamento de frame completo para a outra página e fazendo com que o aplicativo seja renderizado novamente. Se você estiver usando o roteador do Angular, isso pode ser indesejável, pois o roteador permite a navegação no "lado do cliente" e mostra ou oculta apenas as partes da página conforme necessário.

Atualmente, há um cenário em que MSAL.js navegará de uma página em seu aplicativo para outra. Se o aplicativo estiver fazendo todas as seguintes ações, continue lendo:

• Seu aplicativo está usando o fluxo de redirecionamento, em vez do fluxo pop-up, para fazer logon
• PublicClientApplication é configurado com auth.navigateToLoginRequestUrl: true (padrão)
• Seu aplicativo tem páginas que podem chamar loginRedirect/acquireTokenRedirect usando um redirectUri compartilhado, ou seja, você chama loginRedirect de http://localhost/protected com um redirectUri igual a http://localhost

Se o seu aplicativo estiver fazendo tudo o que foi mencionado acima, você poderá substituir o método que o MSAL usa para navegar importando o MsalCustomNavigationClient e chamando setNavigationClient.

NOTA: Devido a uma correção de segurança, o MsalCustomNavigationClient não usará o Router do Angular para navegar no cliente quando navigateToLoginRequestUrl estiver definido como true e estiver processando redirecionamentos. Esse é um problema conhecido que será resolvido em uma versão futura.

Implementação de Exemplo

O exemplo a seguir mostrará como implementar isso ao usar o Angular Router. Mais informações sobre o Roteador Angular podem ser encontradas aqui e você pode encontrar um aplicativo de exemplo completo que implementa isso para o Angular aqui.

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