A(z) @azure/msal-angular konfigurálása az útválasztó navigate funkciójának használatára ügyféloldali navigációhoz

Alapértelmezés szerint, amikor az MSAL.js-nek az alkalmazás egyik oldaláról a másikra kell navigálnia, újra beállítja a window.location elemet, ami a másik oldalra történő, teljes keretet érintő átirányítást eredményez, és emiatt az alkalmazás újra kirenderelődik. Ha az Angular Útválasztót használja, ez nem feltétlenül lehetséges, mivel az útválasztó engedélyezi az "ügyféloldali" navigációt, és szükség szerint csak a lap részeit jeleníti meg vagy rejti el.

Jelenleg van egy forgatókönyv, amelyben MSAL.js az alkalmazás egyik oldaláról a másikra navigál. Ha az alkalmazás a következő műveleteket hajtja végre, folytassa az olvasást:

• Az alkalmazás az előugró folyamat helyett az átirányítási folyamatot használja a bejelentkezéshez
• PublicClientApplication konfigurálva van ( auth.navigateToLoginRequestUrl: true alapértelmezett)
• Az alkalmazás olyan oldalakkal rendelkezik, amelyek meghívhatják a(z) loginRedirect/acquireTokenRedirect elemet egy közös redirectUri használatával, azaz Ön a(z) loginRedirect elemet a(z) http://localhost/protected elemből hívja meg, http://localhost redirectUri használatával

Ha az alkalmazás az összes fent említett dolgot elvégzi, felülírhatja azt a metódust, amelyet az MSAL a navigáláshoz használ, a MsalCustomNavigationClient importálásával és a setNavigationClient meghívásával.

MEGJEGYZÉS: Biztonsági javítás miatt a rendszer nem használja az MsalCustomNavigationClient Angulart Router az ügyféloldali navigáláshoz, ha navigateToLoginRequestUrl igaz értékre van állítva, és kezeli az átirányításokat. Ez egy ismert probléma, amely egy későbbi kiadásban lesz megoldva.

Példa implementálásra

Az alábbi példa bemutatja, hogyan implementálhatja ezt az Angular Routerhasználatakor. Az Angular-útválasztóról itt talál további információt, és itt talál egy teljes mintaalkalmazást, amely implementálja ezt az Angularhoz.

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