angolare 2 landing page

Question

sto prendendo i primi passi con angolare 2 e angolari in generale, e mi chiedo come impostare una pagina di destinazione.

Il mio obiettivo è quello di mostrare un'ogni landingpage l'utente non dispone di un gettone nella memoria locale o in un cookie.

miei app.component.ts sembra che questo

import {Component} from 'angular2/core'; 
import {ROUTER_DIRECTIVES, RouteConfig} from 'angular2/router'; 
import {NavbarComponent} from './navbar.component'; 
import {LoaderComponent} from './loader.component'; 
import {NameListService} from '../shared/index'; 
import {HomeComponent} from '../+home/index'; 
import {AboutComponent} from '../+about/index'; 

@Component({ 
    selector: 'g-app', 
    viewProviders: [NameListService], 
    templateUrl: 'app/components/app.component.html', 
    directives: [ROUTER_DIRECTIVES, NavbarComponent, LoaderComponent] 
}) 
@RouteConfig([ 
    { 
    path: '/', 
    name: 'Home', 
    component: HomeComponent 
    }, 
    { 
    path: '/about', 
    name: 'About', 
    component: AboutComponent 
    } 
]) 
export class AppComponent { 

} 

/home e/Chi sono anche componenti se ho capito bene. Ora vorrei avere una pagina separata che non ha accesso alla barra di navigazione. Quale è ciò su cui l'utente atterrerà sempre se non ha effettuato il login.

Sarebbe fantastico se qualcuno potesse aiutarmi ad iniziare o almeno indicarmi una buona direzione, magari indicarmi un buon 2 tutorial angolare.

Questo è il testo standard che sto basando la mia app sul https://github.com/mgechev/angular2-seed

Answer 1

È possibile ignorare il router-outlet e verificare sull'attivazione , se il token è presente. Qualcosa di simile a questo:

import {Directive, Attribute, ElementRef, DynamicComponentLoader} from 'angular2/core'; 
import {Router, RouterOutlet, ComponentInstruction} from 'angular2/router'; 

@Directive({ 
    selector: 'router-outlet' 
}) 
export class LoggedInRouterOutlet extends RouterOutlet { 
    publicRoutes: any; 
    private parentRouter: Router; 

    constructor(_elementRef: ElementRef, _loader: DynamicComponentLoader, 
       _parentRouter: Router, @Attribute('name') nameAttr: string) { 
     super(_elementRef, _loader, _parentRouter, nameAttr); 

     this.parentRouter = _parentRouter; 

    } 

    activate(instruction: ComponentInstruction) { 
     if (!hasToken()) { 
      this.parentRouter.navigateByUrl('/login'); 
     } 
     return super.activate(instruction); 
    } 
} 

Adattato da qui: https://github.com/auth0-blog/angular2-authentication-sample/blob/master/src/app/LoggedInOutlet.ts

---

Questo può essere esteso per essere in grado di lavorare con i ruoli e le altre controlls di accesso.

Answer 2

Si può solo reindirizzare ad un percorso specifico sul carico quando il token non è disponibile.

export class AppComponent { 
    constructor(private router:Router) { 
    if(!hasToken()) { 
     router.navigate(['/LoginForm']); 
    } 
    } 
} 

In alternativa è possibile creare un custom RouterOutlet che controlla per ogni percorso se è consentito per l'utente di navigare a quel percorso come spiegato nel http://www.captaincodeman.com/2016/03/31/angular2-route-security/