角canActive可观察

时间:2018-07-14 11:41:25

标签: angular observable guard canactivate

我在警卫队中使用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的每个分支中返回,因此应该足够了,但显然不是。如果我退回订阅,他也会抱怨。

有帮助吗?非常感谢。

1 个答案:

答案 0 :(得分:2)

您的方法必须返回某些内容。它什么也不会返回。

它可以返回一个布尔值。仅当您知道要同步返回的值时才有可能。但是您需要异步调用才能知道结果是什么。因此,您不能返回布尔值。这就是为什么守卫也可以返回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;
    }
  })
);