我正在尝试从 Angular 中的服务接收布尔值，但它仅 return 整个对象

Question

我正在构建一个简单的服务，returns 如果我是否是团队的一员（简单的 true 或 false）。我已经验证了后端并且它有效。缺少的部分在我的 angular 应用程序中。

authentication.service.ts 看起来像

import { Injectable } from '@angular/core';

import { Http, Headers, Response, Request, RequestMethod, RequestOptions } from '@angular/http';
import { Observable } from 'rxjs/Rx';
import { environment } from '../../../environments/environment';

let roleUrl = environment.apiBaseUrl + 'CoreRole';
let options = new RequestOptions({ withCredentials: true });

@Injectable()
export class AuthenticationService {

  constructor(private http: Http) { }

  getRoleByName(name): Observable<boolean> {
    console.log('getRoleByName FN: ' + roleUrl + '?name=' + name);
      return this.http.get(roleUrl + '?name=' + name, options)
      .take(1)
      .map(res => <boolean>res.json())
      .catch(this.handleError);
  }

  private handleError(error: Response) {
    console.log(error);
    return Observable.throw(error.json().error || 'Server error');
  }  

}

而 or.guard.ts 看起来像

import { Injectable } from '@angular/core';
import { CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';
import { Router } from '@angular/router';

import { Observable } from 'rxjs/Rx';
import { AuthenticationService } from '../services/authentication.service';

@Injectable()
export class OrGuard implements CanActivate {
  constructor(private authenticationService: AuthenticationService, private router: Router) { }

  isProjectTeam : boolean;

  canActivate() {

    this.isProjectTeam = <boolean><any> this.authenticationService.getRoleByName("ProjectTeam");

    if(this.isProjectTeam === true)
    {
      return true;
    }
    else
    {
      this.router.navigateByUrl('/not-authorized');
    }

    return false;
  }

}

因此，我总是被带到 /not-authorized 页面，因为 isProjectTeam 变量永远不会被格式化为布尔值。

谁能帮帮我？

谢谢

Answer 1

您正在尝试将 Observable 转换为 boolean，而您想要的是获取 Observable.

的结果

如果您尝试 let x = this.authenticationService.getRoleByName("ProjectTeam");，您会看到 x 的类型为 Observable<boolean>。

您可以使用 canActivate() return 一个 Observable<boolean> 而不是 boolean，因此请像这样更改您的代码：

canActivate(): Observable<boolean> {
    return this.authenticationService.getRoleByName("ProjectTeam").map(
        response => {
            if (response) {
                return true;
            }
            else {
                this.router.navigateByUrl('/not-authorized');
                return false;
            }
        });
}

如果您使用的是 TypeScript，那么在处理像这样的复杂对象时，您可以做的一件事是使用 let x = ... 之类的代码将其分解成多个部分。 Intellisense 应该会告诉您正在处理的类型，并为您提供线索，说明为什么您的代码没有按照您认为的那样进行编译。

More info on the CanActivate guard

我正在尝试从 Angular 中的服务接收布尔值，但它仅 return 整个对象

I am trying to receive a boolean value from a service in Angular but it only return the whole object

guard

angular