6

介绍

我正在尝试Angular2+使用共享服务中的 Observable 创建一个路由保护，该服务包含当前用户角色的字符串值。
问题显然在于将我的想法从 Promise 转移到 Observables。

到目前为止，我所做的是基于启发式和尝试和错误方法，但我通过杀死浏览器撞到了墙解决了感谢 danday74

.

尝试（感谢@danday74 改进）

借助相当于promise.then() 的 RxJS 序列？我已经将我想做的事情翻译成这个链：

canActivate(route: ActivatedRouteSnapshot): Observable<boolean> | boolean {
        return this.auth.isRoleAuthenticated(route.data.roles)
            .mergeMap((isRoleAuthenticated: boolean) => {
                return isRoleAuthenticated ? Observable.of(true) : this.auth.isRole(Roles.DEFAULT_USER);
            })
            .do((isDefaultUser: boolean) => {
                const redirectUrl: string = isDefaultUser ? 'SOMEWHERE' : 'SOMEWHERE_ELSE';
                this.router.navigate([redirectUrl]);
            })
            .map((isDefaultUser: boolean) => {
                return false;
            });
    }

问题

如果 ，如何停止可观察链的进一步传播isRoleAuthenticated = true？如果满足这样的条件，我需要返回该布尔值，并确保.do之后不调用操作符块。
限制是必须从canActivate守卫返回布尔值。

4

3 回答 3

3

该do()运算符仅适用于next通知，因此如果您不想处理之后出现.mergeMap的内容，可以使用以下命令将其过滤掉filter()：

return this.auth.isRoleAuthenticated(route.data.roles)
  .mergeMap((isRoleAuthenticated: boolean) => {
    return isRoleAuthenticated ? Observable.of(true) : this.auth.isRole(Roles.DEFAULT_USER);
  })
  .filter(authenticated => authenticated !== true)

但是，看起来您可以只返回Observable.empty()而不是Observable.of(true)因为它只会发出complete通知而没有任何next项目，因此不会有任何东西可以传递给do()：

.mergeMap((isRoleAuthenticated: boolean) => {
  return isRoleAuthenticated ? Observable.empty() : this.auth.isRole(Roles.DEFAULT_USER);
})
于 2018-10-17T12:33:43.980 回答
2

无论您从第一个 mergeMap 返回什么，都将传递给您的第二个 mergeMap，因此它不会停止进一步的传播。如果您想停止传播，请使用过滤器（尽管在这种情况下可能会导致挂起）。

只有在返回 Observable 时才使用 mergeMap，但不需要从第二个 mergeMap 返回 Observable。做就是了：

  .mergeMap((isRoleAuthenticated: boolean) => {
    if (isRoleAuthenticated) {
      return Observable.of(true)
    }
    return this.auth.isRole(Roles.DEFAULT_USER)
  })
  .tap((isDefaultUser: boolean) => {
    if (isDefaultUser) {
      this.router.navigate(['SOMEWHERE'])
    } else {
      this.router.navigate(['SOMEWHERE_ELSE'])
    }
  })
  .map((isDefaultUser: boolean) => {
    return false
  })

此外，您使用的是 RxJs v5 语法，但应该使用 v6。在 v6 中，操作符 - mergeMap、tap、map - 在管道中以逗号分隔。

可能是路由器导航阻止了最终返回并导致挂起？将其注释掉，看看它是否会停止挂起。

不确定这是否会完全解决您的问题，但希望对凌晨 1 点有一些有用的见解

我假设这些返回 Observables：

  • this.auth.isRoleAuthenticated
  • this.auth.isRole(Roles.DEFAULT_USER)

如果他们不这样做，您将遇到问题。

解决方案

您可以创建一个由沿途收集的 Observables 的结果组成的对象，而不是专注于停止链，并进一步传播它，从而解决问题：

canActivate(route: ActivatedRouteSnapshot): Observable<boolean> | boolean {
    return this.auth.getRole()
        .mergeMap((role: string) => {
            return this.auth.isRoleAuthorized(route.data.roles)
                .map((authorized: boolean) => ({
                    role: role,
                    authorized: authorized
                }));
        })
        .do((markers: { role: string, authorized: boolean }) => {
            const redirectUrl: string = markers.role === Roles.DEFAULT_USER ? 'SOMEWHERE' : 'SOMEWHERE_ELSE';
            this.router.navigate([redirectUrl]);
        })
        .map((markers: { role: string, authorized: boolean }) => {
            return markers.authorized;
        });
}
于 2018-10-16T23:50:33.973 回答
1

Observable.of(true)您可以使用 return代替return Observable.empty()，这将完成，不会发出任何值。因此不会执行以下链。

于 2018-10-17T17:02:58.107 回答