İstemci tarafında gezinti için yönlendiricinizin gezinme işlevini kullanacak şekilde yapılandırma @azure/msal-angular

Varsayılan olarak, MSAL.js uygulamanızda bir sayfadan diğerine gitmesi gerektiğinde window.location yeniden atanır; bu da diğer sayfaya tam çerçeve yeniden yönlendirmesine ve uygulamanızın yeniden oluşturulmasına neden olur. Angular Yönlendirici'yi kullanıyorsanız, Yönlendirici "istemci tarafı" gezintiyi etkinleştirdiğinden ve sayfanın yalnızca bölümlerini gerektiği gibi gösterdiğinden veya gizlediğinden bu durum istenmeyen bir durum olabilir.

Şu anda MSAL.js uygulamanızdaki bir sayfadan diğerine gideceği bir senaryo vardır. Uygulamanız aşağıdakilerin tümünü yapıyorsa okumaya devam edin:

• Uygulamanız, oturum açmak için açılır akış yerine yeniden yönlendirme akışını kullanıyor
• PublicClientApplication ile yapılandırıldı auth.navigateToLoginRequestUrl: true (varsayılan)
• Uygulamanızda, paylaşılan bir redirectUri ile loginRedirect/acquireTokenRedirect çağırabilen sayfalar olabilir; yani, http://localhost/protected içinden loginRedirect öğesini http://localhost redirectUri’si ile çağırırsınız.

Uygulamanız yukarıdakilerin tümünü yapıyorsa, MsalCustomNavigationClient öğesini içe aktararak ve setNavigationClient çağrısını yaparak MSAL'nin gezinmek için kullandığı yöntemi geçersiz kılabilirsiniz.

NOT: Bir güvenlik düzeltmesi nedeniyle, navigateToLoginRequestUrl true olarak ayarlandığında ve yeniden yönlendirmeler işlenirken MsalCustomNavigationClient, istemci taraflı gezinme için Angular Router kullanmayacaktır. Bu, gelecekteki bir sürümde giderilecek bilinen bir sorundur.

Örnek Uygulama

Aşağıdaki örnekte Angular Routerkullanılırken bunun nasıl uygulanacağı gösterilmektedir. Angular Yönlendiricisi hakkında daha fazla bilgiyi burada bulabilir ve angular için bunu uygulayan tam örnek uygulamayı burada bulabilirsiniz.

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