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

Posted

技术标签:

【中文标题】canActivate 在订阅更改时不响应 Angular 2 路由器 AngularFire2【英文标题】:canActivate doesn't respond upon subscription change Angular 2 Router 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 中保护我的路由响应的正确方法是什么?

【问题讨论】:

【参考方案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&lt;boolean&gt;' 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();
  

【讨论】:

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

以上是关于canActivate 在订阅更改时不响应 Angular 2 路由器 AngularFire2的主要内容,如果未能解决你的问题,请参考以下文章

尝试订阅 CBCharacteristic 时不允许写入错误

div的jQuery高度()在方向更改时不正确

如何从订阅中返回 observable

Angular基础 HTTP & Routing

JMeter WebSockets 发布/订阅 - 编写异步响应脚本

通过 GAE 标准上的 Websockets 订阅 GraphQL 没有响应