Angular 2 Landing page

Question

Ich mache meine ersten Schritte mit Angular 2 und eckig im Allgemeinen, und ich frage mich, wie ich eine Landingpage einrichten soll.

Mein Ziel ist es, eine Landingpage anzuzeigen, immer wenn der Benutzer kein Token im lokalen Speicher oder in einem Cookie hat.

sieht mein app.component.ts wie diese

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 und/sind etwa auch Komponenten, wenn ich das richtig verstehe. Jetzt möchte ich eine separate Seite haben, die keinen Zugriff auf die Navigationsleiste hat. Womit der Benutzer immer landen wird, wenn er nicht eingeloggt ist.

Wäre toll, wenn jemand mir helfen könnte, mich zu starten oder mich zumindest in eine gute Richtung zu weisen, vielleicht auf ein gutes eckiges 2-Tutorial.

Dies ist die vorformulierten ich meine app auf https://github.com/mgechev/angular2-seed

Answer 1

Sie können den Router-Ausgang außer Kraft setzen und überprüfen Sie auf Aktivierung , wenn das Token vorhanden ist. Etwas wie folgt aus:

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

Angepasst von hier: https://github.com/auth0-blog/angular2-authentication-sample/blob/master/src/app/LoggedInOutlet.ts

---

Dies kann erweitert werden, um der Lage sein, mit Rollen und anderen Zugang controlls zu arbeiten.

Answer 2

Sie zu einer bestimmten Strecke nur umleiten können auf Last am stützen, wenn das Token nicht verfügbar ist.

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

Alternativ können Sie eine benutzerdefinierte RouterOutlet erstellen, die für jede Route überprüft, ob es erlaubt ist, für den Benutzer zu dieser Strecke zu navigieren wie in http://www.captaincodeman.com/2016/03/31/angular2-route-security/ erklärt