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

【问题标题】：canActivate doesn't respond upon subscription change Angular 2 Router AngularFire2canActivate 在订阅更改时不响应 Angular 2 路由器 AngularFire2
【发布时间】：2017-02-02 20:51:29
【问题描述】：

我正在使用 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），它不会在订阅解析为 true 后加载相应的组件。

在角度 1 中，保护路线是确保在路线加载之前先解决问题。

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

在 Angular 2 中保护我的路由响应的正确方法是什么？

【问题讨论】：

标签： angular angular2-routing angular2-services angularfire2

【解决方案1】：

在您的代码中，return this.allowed; 在执行传递给 this.af.auth.subscribe(...) 的回调函数之前执行。

应该是这样的

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

【讨论】：

返回错误：Property 'map' does not exist on type 'AngularFireAuth'.
你必须导入map。搜索没有ßAngularDireAuth'的错误消息
即便如此，在导入 map 后，我还是会收到此错误：error TS2322: Type 'Observable<boolean>' is not assignable to type 'boolean'.
我编辑了我必须做的导入。使溶液更清晰。感谢您的帮助
感谢您添加导入。

【解决方案2】：

如果您来寻找带有 angularfire 4 的 Angular 4，这就是我调整 Gunter 答案的方式：

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

【讨论】：

感谢您的更新。事情发展得如此之快，以至于很难跟上。