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

Posted 2023-03-13

【中文标题】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<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();
  

【讨论】：

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