canActivate在订阅更改时不作出响应Angular 2路由器AngularFire2

Question

我正在使用AngularFire2。这是我走近我AuthGuard服务：

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

上面的代码工作，除非我直接访问一个页面守卫（我进入浏览器URL），认购解析后，它不会加载相应组件真正。

在angular 1中，守护路线确保在路线加载之前先解决某个问题。

它出现在第2角度，路由负载（无论是真还是假，并且不等待来自线路的任何响应），因此，当订阅值返回为真时，我必须去另一条路由，然后在它工作之前回来。

什么是正确的方法来保护我的路线，以响应Angular 2？

Answer 1

在您的代码return this.allowed;执行之前执行回调函数传递给。

应该是这样

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

如果您过来找角4 angularfire 4，这个我怎么调整冈特的回答是：

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