Angolare 2 Autenticazione con percorsi figlio

Question

Ho un'applicazione angolare 2 in cui devo essere autenticato su ogni pagina. Quindi ho implementato un RouterOutlet personalizzato per confermare che ho effettuato l'accesso ad ogni cambio di pagina.

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

Ecco un codice di lavoro: http://plnkr.co/edit/YnQv7Mh9Lxc0l0dgAo7B?p=preview

Esiste un modo migliore per intercettare i cambiamenti di rotta e reindirizzare per il login quando l'utente non è autenticato?

Answer 1

Per chi trova questo, la risposta ora in Angular 2 è di utilizzare "Guardie" come parte del nuovo router. Vedere angolare 2 documentazione:

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

Una guardia di base solo implementa "CanActivate", e potrebbe funzionare come segue:

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

Come si può vedere in questo esempio ho un AuthService correre da qualche altra parte (l'implementazione non è importante) che può dire alla guardia se l'utente è stato autenticato. Se hanno, restituiscono true e la navigazione avviene come al solito. In caso contrario, restituiamo false e li reindirizziamo alla schermata di accesso.

Answer 2

È inoltre possibile utilizzare CanActivate, tuttavia il DI diretto non è al momento supportato. Ecco un bel workaround tho.

Buona fortuna.

Answer 3

Ecco un esempio aggiornato di utilizzo di AuthGuard con Angular 2 RC6.

Itinerari con percorso casa protetti da 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 reindirizza alla pagina di login se l'utente non è connesso

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

Per l'esempio completo e demo è possibile lavorare check out this post