Jak nakonfigurovat @azure/msal-angular, aby používal navigační funkci vašeho routeru pro navigaci na straně klienta

Pokud MSAL.js ve výchozím nastavení potřebuje přejít z jedné stránky v aplikaci na jinou, znovu se přiřadí window.location, což způsobí přesměrování celého rámce na druhou stránku a způsobí opětovné vykreslení aplikace. Pokud používáte Angular Router, může to být nepopiratelné, protože směrovač povolí navigaci na straně klienta a podle potřeby zobrazí nebo skryje pouze části stránky.

V současné době existuje jeden scénář, kdy MSAL.js přejde z jedné stránky v aplikaci na jinou. Pokud vaše aplikace provádí všechny následující věci, pokračujte ve čtení:

• Vaše aplikace k přihlášení používá tok přesměrování místo automaticky otevíraného toku.
• PublicClientApplication je nakonfigurovaný s auth.navigateToLoginRequestUrl: true (výchozí)
• Vaše aplikace má stránky, které mohou volat loginRedirect/acquireTokenRedirect se sdíleným redirectUri; to znamená, že voláte loginRedirect z http://localhost/protected s redirectUri http://localhost

Pokud vaše aplikace provádí všechny výše uvedené věci, můžete přepsat metodu MSAL používá k navigaci importem MsalCustomNavigationClient a voláním setNavigationClient.

POZNÁMKA: Kvůli opravě zabezpečení nebude MsalCustomNavigationClient používat Angular Router pro navigaci na straně klienta, když je navigateToLoginRequestUrl nastaveno na hodnotu true a dochází ke zpracování přesměrování. Jedná se o známý problém, který bude vyřešen v budoucí verzi.

Příklad implementace

Následující příklad ukazuje, jak tento postup implementovat při použití Angular Router. Další informace o Angular Router najdete zde a můžete najít úplnou ukázkovou aplikaci, která ji implementuje pro Angular zde.

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