如何在 Angular 9 中实现 CanActivate 的警卫中使用 http 请求的结果？

Question

在 angular 中，我有一个实现 canActivate 的 authguard class。 它必须返回 boolean | 可观察 | promise 等。我需要向我的服务器调用 http.get 请求，该请求将根据用户是否满足特定条件返回“true”或“false”，以保护某些路由。

如何从警卫发出 http 请求，等待它返回（或超时？）并使用响应返回 true 或 false。 另外我如何处理错误并默认返回false？ 我知道如何在可观察订阅中使用下一个和错误。 其他答案已提及 pipe 和 map 但已过时或不起作用。

Answer 1

您可以返回Obsrvable<boolean>而无需订阅它。

canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<boolean> {
  return this.http.get<boolean>('/auth/authenticated')
    .pipe(
      timeout(10000), // wait for 10 seconds before fail.
      map(x => x), // return the received value true/false
      catchError(() => of(false))
    );
}