@azure/msal-angular Настройка использования функции навигации маршрутизатора для навигации на стороне клиента

По умолчанию, когда MSAL.js требуется перейти с одной страницы вашего приложения на другую, она переназначает window.location, что приводит к полному перенаправлению фрейма на другую страницу и повторной отрисовке вашего приложения. Если вы используете маршрутизатор Angular, это может быть нежелательным, так как маршрутизатор поддерживает навигацию на стороне клиента и отображает или скрывает только необходимые части страницы.

В настоящее время существует один сценарий, в котором MSAL.js будет переходить с одной страницы в приложении на другую. Если приложение выполняет все следующие действия, продолжайте чтение:

• Приложение использует поток перенаправления вместо всплывающего потока для входа.
• PublicClientApplication настроен с помощью auth.navigateToLoginRequestUrl: true (по умолчанию)
• В вашем приложении есть страницы, которые могут вызывать loginRedirect/acquireTokenRedirect с общим redirectUri, т. е. вы вызываете loginRedirect из http://localhost/protected с redirectUri, равным http://localhost

Если ваше приложение выполняет все описанные выше действия, вы можете переопределить метод навигации, используемый MSAL, импортировав MsalCustomNavigationClient и вызвав setNavigationClient.

ПРИМЕЧАНИЕ: Из-за исправления безопасности MsalCustomNavigationClient не будет использовать Angular Router для навигации на стороне клиента, если для navigateToLoginRequestUrl установлено значение true и выполняется обработка перенаправлений. Это известная проблема, которая будет устранена в будущем выпуске.

Пример реализации

В приведенном ниже примере показано, как реализовать это при использовании Angular Router. Дополнительные сведения об маршрутизаторе Angular можно найти здесь, и вы можете найти полный пример приложения, реализующего это для Angular здесь.

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