如何处理来自api响应的数据然后以角度同步返回布尔值？

问题描述

我的服务中有一个简单的函数：

  /**
   * Funtion to check if the user logged in has admin rights
   */
  isAdmin(user_id: string) {
    var adminTemp: boolean;
    this.httpClient
        .get(`${this.urk}/${user_id}`)
        .subscribe((data: any) => {
          if (data.includes('Admin')) {
            adminTemp = true;
          } else {
            adminTemp = false;
          }
        });
    return adminTemp;
  }

此函数在 canActivate 函数中调用，该函数需要一个 bool 值来确定用户是否为管理员。

canActivate(
    next: ActivatedRouteSnapshot,state: RouterStateSnapshot): Observable<boolean | UrlTree> | Promise<boolean | UrlTree> | boolean | UrlTree {
    if(this.loginService.isAdmin('123')){
      return true;
    }
    else{
      return this.router.parseUrl("/admin/logout");
    }
  }

问题在于，在进行 api 调用之前，它取值为 undefined 并将用户标记为非管理员。我理解发生这种情况是因为 subscribe 本身是一个异步调用。我找不到任何其他方法来弄清楚如何执行此操作，因为必须先处理 api 响应，然后才能知道它们是否是用户，否则我会使用简单的 return 语句。我应该如何进行？

解决方法

您的问题是您没有利用响应式编程（这是 Angular 在 Rxjs 的帮助下带来的最佳优势之一）。

在您的函数 isAdmin() 中，它调用异步的 http，您不确定何时返回 adminTemp ，它已被分配了来自 http 结果的值。

相反，您不应该从 asAdmin 订阅 http 调用，只需将其作为 observable 返回，并让 canActive 处理它。所以try not to subscribe if you can avoid it，会帮助你提高效率。

      isAdmin(user_id: string): Observable<boolean> {
        
        return this.httpClient
            .get(`${this.urk}/${user_id}`)
            .pipe(
               switchMap((data) => {
                 if (data.includes('Admin')) {
                   return of(true);
                 } else {
                  return of(false);
                 }
                })
             );
        
      }

优点是canActive()也可以返回Observable，所以你可以很容易地在canActive()中使用它，如下所示：

    canActivate(
        next: ActivatedRouteSnapshot,state: RouterStateSnapshot): Observable<boolean | UrlTree> | Promise<boolean | UrlTree> | boolean | UrlTree {
        return this.loginService.isAdmin('123').pipe(
     map((res) => {
      if (res) {
         return true;
      } else {
         return  this.router.parseUrl("/admin/logout");   
      }
     })
 );

      }