AuthGuard non aspetta che l'autenticazione per terminare prima di controllare utente

Question

ho letto la guida qui: https://angular.io/docs/ts/latest/guide/router.html

sembra abbastanza semplice, tuttavia, non sono sicuro di come utilizzare l'autenticazione di angularfire2 all'interno di una guardia di autenticazione (canActivate). Quello che ho provato è:

AuthService

import { Injectable } from '@angular/core'; 
import { AngularFire } from 'angularfire2'; 

@Injectable() 
export class AuthService { 

    private user: any; 

    constructor(private af: AngularFire) { 
    this.af.auth.subscribe(user => { 
     this.user = user; 
    }) 
    } 

    get authenticated(): boolean { 
    return this.user ? true : false; 
    } 

} 

AuthGuard

@Injectable() 
export class AuthGuard implements CanActivate { 

    constructor(private router: Router, private authService: AuthService) { } 

    canActivate(): Observable<boolean> | boolean { 
    if (this.authService.authenticated) 
     return true; 

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

} 

Ho anche aggiunto AuthService per il bootstrap fornitori.

Questo tipo di funziona bene, tuttavia, il mio problema principale è quando aggiorno (o inizialmente carico) la pagina su che ha AuthGuard mi reindirizza sempre alla pagina di accesso poiché lo AuthGuard non attende la risposta di autenticazione. C'è un modo per attendere che l'autenticazione finisca (anche se è fallita) e quindi verificare se l'utente è autenticato?

Answer 1

Il problema è con il tuo codice. In AuthGuard controlli il risultato del metodo authenticated() che molto probabilmente restituirà falso poiché la proprietà dell'utente non è ancora impostata. Prova questo:

AuthService:

import { Injectable } from '@angular/core'; 
import { AngularFire } from 'angularfire2';'; 
import { Observable } from 'rxjs/Observable'; 

@Injectable() 
export class AuthService { 

    private user: any; 

    constructor(private af: AngularFire) { } 
    setUser(user) { this.user = user; } 
    getAuthenticated(): Observable<any> { return this.af.auth; } 
} 

AuthGuard:

@Injectable() 
export class AuthGuard implements CanActivate { 

    constructor(private router: Router, private authService: AuthService) { } 

    canActivate(): Observable<boolean> | boolean { 
    // here check if this is first time call. If not return 
    // simple boolean based on user object from authService 
    // otherwise: 

    return this.authService.getAuthenticated.map(user => { 
      this.authService.setUser(user); 
      return user ? true : false; 
    }) 

    } 
} 

Answer 2

potrebbe essere diverso in alcune versioni del router, ma avevo bisogno di restituire un osservabile che completa .

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

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

    canActivate(): Observable<boolean> { 
    return this.af.auth.map(user => { 
     if (user != null) 
     return true 
     this.router.navigate(['/login']) 
    }) 
    .take(1) // To make the observable complete after the first emission 
    } 
}