Buona strategia modello per l'autenticazione in Angular 2

Question

Al momento ho un angolare 2 app installato e funzionante che appare come segue:

App.component è bootstrap quando si visita il sito. Il modello per App.component ha tutti i tag componente (ad esempio menu.component, search.component e router-outlet).

Ciò di cui ho bisogno fondamentalmente è il seguente: attualmente un visitatore viene reindirizzato direttamente alla pagina di accesso perché l'utente deve effettuare il login. È ancora in grado di vedere il menu e tutti i componenti che sono lì solo per gli utenti registrati. Quale sarebbe la migliore strategia per aggiungere un livello template aggiuntivo, quindi gli utenti non connessi vengono reindirizzati?

Answer 1

Il modo in cui l'ho fatto è utilizzare la direttiva * ngIf per "nascondere" quegli elementi finché l'utente non è autenticato. Uso le virgolette attorno alla parola nascondi sopra perché angolare in realtà non nasconde quella parte del modello, in realtà non lo rende affatto, quindi non è nel DOM.

Ciò significa che, a meno che l'utente non acceda, verrà visualizzata solo la schermata di accesso.

Maggiori dettagli sul * ngIf possono essere trovate qui:

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

es.

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