gute Vorlage Strategie für die Authentifizierung in Angular 2

Question

Im Moment habe ich eine Angular 2 App und läuft, die sieht wie folgt aus:

App.component Bootstrap, wenn Sie die Seite besuchen. Die Vorlage für App.component enthält alle Komponenten-Tags (z. B. menu.component, search.component und router-outlet).

Was ich im Grunde brauche, ist folgendes: Derzeit wird ein Besucher direkt auf die Anmeldeseite umgeleitet, da sich der Benutzer anmelden muss. Er sieht immer noch das Menü und alle Komponenten, die nur für eingeloggte Benutzer vorhanden sind. Was wäre die beste Strategie, um eine zusätzliche Vorlagenebene hinzuzufügen, damit nicht eingeloggte Benutzer umgeleitet werden?

Answer 1

Die Art, wie ich es getan habe, ist die Verwendung der * ngIf-Direktive, um diese Elemente "auszublenden", bis der Benutzer authentifiziert ist. Ich verwende Anführungszeichen um das obige Wort verstecken, weil eckig diesen Teil der Vorlage nicht wirklich versteckt, es tatsächlich gar nicht darstellt, so dass es nicht im DOM ist.

Das bedeutet, dass nur der Anmeldebildschirm gerendert wird, wenn sich der Benutzer nicht anmeldet.

https://angular.io/docs/ts/latest/guide/structural-directives.html#!#ngIf

ex:

Weitere Details zu * ngIf sind hier zu finden.

@Component({ 
    selector: 'your-selector', 
    template: ` 
     <div *ngIf='isLoggedIn() === true'> 
      <menu-component></menu-component> 
      <search-component></search-component> 
      <router-outlet></router-outlet> 
     </div> 
     <div *ngIf='isLoggedIn() !== true'> 
      <login-component></login-component> 
     </div> 
    ` 
    ... 
}) 
export class YourSelectorComponent { 
    isLoggedIn() { 
     //check if logged in 
    } 
}