Cómo configurar @azure/msal-angular para usar la función de navegación del enrutador para la navegación del lado cliente

De forma predeterminada, cuando MSAL.js necesita navegar de una página de su aplicación a otra, reasignará window.location, lo que provocará una redirección de marco completo a la otra página y hará que su aplicación vuelva a renderizarse. Si usa el enrutador angular, esto puede no ser factible, ya que el enrutador habilita la navegación "lado cliente" y muestra u oculta solo las partes de la página según sea necesario.

Actualmente hay un escenario en el que MSAL.js navegará de una página de la aplicación a otra. Si la aplicación está realizando todas las siguientes cosas, continúe leyendo:

• La aplicación usa el flujo de redirección, en lugar del flujo emergente, para iniciar sesión.
• PublicClientApplication está configurado con auth.navigateToLoginRequestUrl: true (valor predeterminado)
• La aplicación tiene páginas que pueden llamar a loginRedirect/acquireTokenRedirect con un redirectUri compartido; es decir, llama a loginRedirect desde http://localhost/protected con un redirectUri de http://localhost

Si su aplicación realiza todas las tareas anteriores, puede reemplazar el método que MSAL usa para navegar importando MsalCustomNavigationClient y llamando a setNavigationClient.

NOTA: Debido a una corrección de seguridad, el MsalCustomNavigationClient no usará Angular Router para navegar por el lado cliente cuando navigateToLoginRequestUrl se establece en true y controla las redirecciones. Se trata de un problema conocido que se solucionará en una versión futura.

Implementación de ejemplo

En el ejemplo siguiente se muestra cómo implementar esto al usar Angular Router. Puede encontrar más información sobre el enrutador angular aquí y puede encontrar una aplicación de ejemplo completa que implemente esto para Angular aquí.

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