Angular canActive 与 observable

Question

我在守卫中使用 canActivate 方法。我在里面有一个可观察对象，它返回一个对象。这个对象有一个密码。我检查密码，如果正确，我希望 canActivate 为 return 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;
        }
      )
  }

我无法理解回复。每当它完成时，我都必须给出回应。从订阅中获得值后，我想 return 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 的每个分支中 returning，所以它应该足够了，但显然还不够。如果我return订阅了，他也投诉

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

Answer 1

您的方法必须 return 一些东西。它没有 return 任何东西。

它可以return一个布尔值。这只有在您可以同步知道 return 的值时才有可能。但是您需要异步调用才能知道结果应该是什么。所以你不能 return 一个布尔值。这就是为什么守卫也可以 return 和 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;
    }
  })
);

Angular canActive 与 observable

Angular canActive with observable

guard

observable

canactivate

angular