canActivate reagiert nicht auf Änderung des Abonnements Angular 2 Router AngularFire2

Question

Ich verwende AngularFire2. Dies ist, wie ich näher kam meinen AuthGuard Service:

canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean { 
    this.af.auth.subscribe((auth) => { 
     if(auth == null) { 
     this.router.navigate(['/login']); 
     this.allowed = false; 
     } else { 
     this.allowed = true; 
     } 
    }) 
    return this.allowed; 
    } 

Der obige Code funktioniert, außer wenn ich besuche eine bewachte Seite direkt (i eingeben URL in Browser), ist es nicht die jeweilige Komponente zu laden, nachdem das Abonnement verrechnet wird zu wahr.

In Winkel 1 wurde durch die Überwachung der Route sichergestellt, dass etwas zuerst aufgelöst wird, bevor die Route geladen wird.

Es erscheint in Winkel 2, die Route lädt (ob wahr oder falsch, und wartet auf keine Antwort von der Leitung), daher zu dem Zeitpunkt der Subskription Wert als wahr zurückgibt, muss ich zu einer anderen Route gehen Dann komm zurück, bevor es funktioniert.

Was ist der richtige Weg, um meine Route in Angular 2 zu reagieren?

Answer 1

In Ihrem Code wird return this.allowed; ausgeführt, bevor die an übergebene Callback-Funktion ausgeführt wird.

Es sollte wie

import 'rxjs/add/operator/map'; 
    import 'rxjs/add/operator/first'; 
    import { Observable } from 'rxjs/Observable'; 


    canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<boolean> { 
    return this.af.auth.map((auth) => { 
     if(auth == null) { 
     this.router.navigate(['/login']); 
     return false; 
     } else { 
     return true; 
     } 
    }).first() 
    } 

Answer 2

Wenn Sie Angular 4 mit angularfire 4 Suche kam, diese, wie ich Gunter Antwort angepasst:

canActivate(route: ActivatedRouteSnapshot):Observable<boolean>{ 
    return this.af.authState.map((user)=>{ 
     if(user != null){ 
     return true; 
     }else{ 
     this._store.dispatch(new LayoutOpenLoginAction()); 
     return false; 
     } 
    }).first(); 
    }