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

Por defeito, quando MSAL.js precisar de navegar de uma página na sua aplicação para outra, será reatribuído window.location, causando um redirecionamento de frame completo para a outra página e fazendo com que a sua aplicação volte a ser renderizada. Se estiveres a usar o Router Angular, isto pode ser indesejável, pois o router permite a navegação "do lado do cliente" e só mostra ou esconde as partes da página conforme necessário.

Atualmente, existe um cenário em que o MSAL.js navegará de uma página da sua aplicação para outra. Se a sua aplicação faz tudo o que se segue, continue a ler:

• A sua aplicação está a usar o fluxo de redirecionamento, em vez do fluxo pop-up, para iniciar sessão
• PublicClientApplication está configurado com auth.navigateToLoginRequestUrl: true (por defeito)
• A sua aplicação tem páginas que podem chamar loginRedirect/acquireTokenRedirect com um redirectUri partilhado, ou seja, chama loginRedirect a partir de http://localhost/protected com um redirectUri de http://localhost

Se a sua aplicação estiver a fazer tudo o que foi dito acima, pode sobrepor 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 utilizará o Angular Router para navegar no lado do cliente quando navigateToLoginRequestUrl estiver definido como true e ao processar redirecionamentos. Este é um problema conhecido que será abordado numa versão futura.

Exemplo de implementação

O exemplo abaixo mostrará como implementar isto ao usar o Angular Router. Mais informações sobre o Angular Router podem ser encontradas aqui, e pode encontrar uma aplicação de exemplo completa que implementa isto 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
  }
}