Angular auth 保护嵌套异步调用答案

【问题标题】：Angular auth guard nested async callAngular auth 保护嵌套异步调用
【发布时间】：2019-01-13 06:04:14
【问题描述】：

我在尝试调用两个异步 http 请求时遇到了一个问题，我试图调用两个异步 http 请求，然后在成功完成后我想做第三个以获取最后一个信息，然后再让用户访问该页面。

到目前为止，这是我的代码：

canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean {

    if (this.recruteurService.getUserInfo() &&
      this.recruteurService.getIndividuPro() &&
      this.recruteurService.getEtablissement()) {
      return true;
    }

    return forkJoin(
      this.recruteurService.rechercherUserInfo(),
      this.recruteurService.rechercherIndividuProfessionnel())
      .mergeMap(([userInfo, individuPro]) => {
        if (userInfo && individuPro) {
          this.recruteurService.setUserInfo(userInfo);
          this.recruteurService.setIndividuPro(individuPro);
        } else {
          return false;
        }

        return this.recruteurService.rechercherEtablissementParIdRce(individuPro.etablissements[0]).map(
          (etablissement: Etablissement) => {
            if (etablissement) {
              this.recruteurService.setEtablissement(etablissement);
              return of(true);
            }
            return of(false);
          });
      });
  }

问题是我遇到了一个错误：

src/app/guard/initialization.guard.ts(32,17) 中的错误：错误 TS2345： '([userInfo, individuPro]: [any, Individu]) 类型的参数 => false | Observable>' 不可分配给参数 type '(value: [any, Individu], index: number) => 可观察输入>'。输入'假| Observable>' 不可分配给类型 '可观察输入>'。类型“false”不可分配给类型“ObservableInput>”。

但我不知道是什么问题。

【问题讨论】：

标签： angular rxjs observable fork-join

【解决方案1】：

您定义了canActivate() => boolean，但如果我正确理解您的代码，您将返回forkJoin()，即Observable<boolean>。

canActivate 方法可以返回boolean 或Observable<boolean> 因此boolean | Observable<boolean> 返回类型，请参阅https://angular.io/api/router/CanActivate。

您可能想创建canActivate(...): boolean | Observable<boolean> 或只使用canActivate(...): Observable<boolean> 然后返回return of(true);。

【讨论】：

实际上是布尔值 | Observable 但我将其删除以尝试看看会发生什么。但仍然有错误。上面的错误在这个直播.mergeMap(([userInfo, individuPro]) => {
在mergeMap 中还有return false;。回调需要返回一个 Observable 例如。 return of(false);
我改变了它，我得到了另一个更复杂的错误方式：Type 'Observable<boolean> | Observable<Observable<boolean>>' is not assignable to type 'ObservableInput<boolean>'. Type 'Observable<Observable<boolean>>' is not assignable to type 'ObservableInput<boolean>'. Type 'Observable<Observable<boolean>>' is not assignable to type 'ArrayLike<boolean>'. Property 'length' is missing in type 'Observable<Observable<boolean>>'.
您正在返回 Observable of Observables of booleans，但我无法告诉您在哪里，因为我没有您的代码。

【解决方案2】：

好的，我设法在第二个可观察流上使用运算符 flatMap 找到了解决方案：

return this.recruteurService.rechercherEtablissementParIdRce(individuPro.etablissements[0]).flatMap(

flatMap - 它基本上合并了一个 observable 的 observable 序列序列成单个可观察序列。

感谢这个文档：Map vs FlatMap

【讨论】：