Angular 2-Authentifizierung mit Kind Routen

Question

ich einen Winkel 2-Anwendung habe, in dem ich muß auf jeder Seite authentifiziert werden. Also habe ich ein benutzerdefiniertes RouterOutlet implementiert, um zu bestätigen, dass ich bei jedem Seitenwechsel angemeldet bin.

@Directive({ 
    selector: 'auth-outlet' 
}) 
export class AuthOutlet extends RouterOutlet { 
    publicRoutes: any; 
    private parentRouter: Router; 
    private authService: AuthService; 
    constructor(_elementRef: ElementRef, 
       _loader: DynamicComponentLoader, 
       _parentRouter: Router, 
       @Attribute('name') nameAttr: string, 
       _authService: AuthService) { 

     super(_elementRef, _loader, _parentRouter, nameAttr); 
     this.parentRouter = _parentRouter; 
     this.authService = _authService; 
     this.publicRoutes = { 
      'Login': true 
     }; 
    } 

    activate(oldInstruction: ComponentInstruction) { 
     var url = this.parentRouter.lastNavigationAttempt; 
     console.log('attemping to nav'); 
     if (!this.publicRoutes[url] && !this.authService.loggedIn){ 
      var newInstruction = new ComponentInstruction('Login', [], new RouteData(), Login, false, 1); 
      return super.activate(newInstruction); 
     } else { 
      return super.activate(oldInstruction); 
     } 
    } 
} 

Hier ist ein funktionierendes Code: http://plnkr.co/edit/YnQv7Mh9Lxc0l0dgAo7B?p=preview

Gibt es einen besseren Weg, Routenänderungen abzufangen und für die Anmeldung umleiten, wenn der Benutzer nicht authentifiziert ist?

Answer 1

Für alle, die diese findet, ist die Antwort jetzt in Angular 2 „Guards“ als Teil des neuen Router zu verwenden. Siehe Angular 2 Dokumentation:

https://angular.io/docs/ts/latest/guide/router.html#!#guards

Eine grundlegende Wache gerade implementiert „CanActivate“ und arbeiten konnte wie folgt:

import {Injectable} from "@angular/core"; 
import {CanActivate, Router} from "@angular/router"; 
import {AuthService} from "../services/auth.service"; 

@Injectable() 
export class AuthGuard implements CanActivate { 
    constructor(private authService:AuthService, private router:Router){} 

    canActivate(){ 
     if(this.authService.isAuthenticated()) 
      return true; 

     this.router.navigate(["/login"]); 
     return false; 
    } 
} 

Wie Sie in diesem Beispiel sehen kann ich ein AuthService haben woanders läuft (Implementierung ist nicht wichtig), die dem Wächter mitteilen kann, ob der Benutzer authentifiziert wurde. Wenn sie haben, kehren Sie zurück und die Navigation geschieht wie gewohnt. Wenn nicht, geben wir false zurück und leiten sie zum Anmeldebildschirm um.

Answer 2

Sie können auch CanActivate verwenden, jedoch direkt DI zur Zeit nicht unterstützt wird. Hier ist eine nette workaround tho.

Viel Glück.

Answer 3

Hier ist ein aktualisierter Beispiel für eine AuthGuard mit kantigen 2 RC6.

Routen mit dem Weg nach Hause geschützt durch AuthGuard

import { Routes, RouterModule } from '@angular/router'; 

import { LoginComponent } from './login/index'; 
import { HomeComponent } from './home/index'; 
import { AuthGuard } from './_guards/index'; 

const appRoutes: Routes = [ 
    { path: 'login', component: LoginComponent }, 

    // home route protected by auth guard 
    { path: '', component: HomeComponent, canActivate: [AuthGuard] }, 

    // otherwise redirect to home 
    { path: '**', redirectTo: '' } 
]; 

export const routing = RouterModule.forRoot(appRoutes); 

AuthGuard Umleitungen zur Login-Seite, wenn der Benutzer nicht angemeldet ist

import { Injectable } from '@angular/core'; 
import { Router, CanActivate } from '@angular/router'; 

@Injectable() 
export class AuthGuard implements CanActivate { 

    constructor(private router: Router) { } 

    canActivate() { 
     if (localStorage.getItem('currentUser')) { 
      // logged in so return true 
      return true; 
     } 

     // not logged in so redirect to login page 
     this.router.navigate(['/login']); 
     return false; 
    } 
} 

Für das gesamte Beispiel und Demo arbeiten Sie können Besuche this post