Angular canActivate 与 observable答案

【问题标题】：Angular canActive with observableAngular canActivate 与 observable
【发布时间】：2018-12-22 14:28:32
【问题描述】：

我在警卫中使用 canActivate 方法。在里面我有一个可观察的，它给了我一个对象。这个对象有一个密码。我检查密码，如果正确，我想让canActivate返回true，否则返回false。

这里是代码

  canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) {
    const uid = route.params.userId;
    const hackId = route.params.hackId;
    const token = this.authService.token;
    const queryParamsPassword = route.queryParams.password;
    this.hacksStorageService.fetchHack(token, uid, hackId)
      .subscribe(
        hack => {
          const hackPassword = hack[0].password;
          if (queryParamsPassword === hackPassword ) {
            return true
          } else {
            this.router.navigate(["/"]);
            return false
          }
        },
        error => {
          return false;
        }
      )
  }

我无法理解回复。无论何时完成，我都必须做出回应。从订阅中获取值后，我想在 canActivate 中返回布尔值。

我得到的错误是关于 canActivate 方法（红色）

[ts]
Property 'canActivate' in type 'RoleGuard' is not assignable to the same property in base type 'CanActivate'.
  Type '(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) => void' is not assignable to type '(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) => boolean | Observable<boolean> | Pr...'.
    Type 'void' is not assignable to type 'boolean | Observable<boolean> | Promise<boolean>'.

我以为我会在 if 的每个分支中返回，所以应该足够了，但显然不是。如果我退订，他也会抱怨。

有什么帮助吗？非常感谢。

【问题讨论】：

不，您在订阅回调中重新调整，这与从canActivate 返回不同。您使用的是哪个版本的 RXJS？

标签： angular observable guard canactivate

【解决方案1】：

你的方法必须返回一些东西。它不返回任何东西。

它可以返回一个布尔值。这只有在您知道要同步返回的值的情况下才有可能。但是你需要一个异步调用来知道结果应该是什么。所以你不能返回一个布尔值。这就是为什么守卫也可以返回Observable<boolean> 的原因。所以，这样做：

return this.hacksStorageService.fetchHack(token, uid, hackId).pipe(
  map(hack => {
    const hackPassword = hack[0].password;
    if (queryParamsPassword === hackPassword ) {
      return true;
    } else {
      this.router.navigate(["/"]);
      return false;
    }
  })
);

【讨论】：