Angular Universal SSR s MSAL Angular

Angular Universal má v @azure/msal-angular minimální podporu. Protože @azure/msal-angular je obálková knihovna pro @azure/msal-browser, která používá globální objekty dostupné pouze v prohlížeči, jako jsou objekty window a location, nejsou při použití Angular Universal dostupné všechny funkce @azure/msal-angular. I když přihlášení a získání tokenu nejsou na straně serveru podporovány, Angular Universal lze používat s @azure/msal-angular, aniž by došlo k narušení fungování vaší aplikace.

Pokyny najdete v dokumentaci k Angularu o tom, jak nainstalovat Angular Universal s existující aplikací a další informace o globálních objektech jen pro prohlížeč.

Pokud chcete použít @azure/msal-angular s Angular Universal, proveďte následující úpravy:

1. Odeberte odkazy na objekty pouze v prohlížeči. Ukázka modulů Angular obsahuje komentáře vedle relevantních řádků, které by se měly odebrat pro vykreslení na straně serveru. Odebrání těchto řádků nebude mít vliv na ukázkovou aplikaci, pokud používáte Angular Universal.

   this.isIframe = window !== window.parent && !window.opener; // Remove this line to use Angular Universal
   

2. Případně je možné před každý řádek, který používá globální objekty dostupné pouze v prohlížeči, přidat podmínku.

   if (typeof window !== "undefined") {
       this.isIframe = window !== window.parent && !window.opener;
   }
   

3. Stejná kontrola by měla být přidána do všech volání HTTP provedených vaší aplikací, protože MsalInterceptor aktuálně používá objekty jen pro prohlížeč. Tento problém bude vyřešen v budoucí opravě. Podívejte se na následující příklad v profile.component.ts z naší starší ukázkové aplikace MSAL Angular v2 Angular 11:

   export class ProfileComponent implements OnInit {
   profile!: ProfileType;
   
       constructor(
           private http: HttpClient
       ) { }
   
       ngOnInit() {
           // This check is added to ensure HTTP calls are made client-side
           if (typeof window !== "undefined") {
               this.getProfile();
           }
       }
   
       getProfile() {
           this.http.get(GRAPH_ENDPOINT)
               .subscribe(profile => {
                   this.profile = profile;
               });
       }
   }
   

4. Ujistěte se, že vaše aplikace nepoužívá směrování hash. Výchozí strategie směrování pro starší ukázkovou aplikaci MSAL Angular v2 Angular 11 je hashové směrování, proto se ujistěte, že je useHash v app-routing.module.ts nastaveno na false:

   @NgModule({
       imports: [RouterModule.forRoot(routes, {
           useHash: false,
           initialNavigation: 'enabled'
       })],
       exports: [RouterModule]
   })
   export class AppRoutingModule { }