Question

我正在构建一个简单的服务，如果我是一个团队的一部分，那就会返回（简单的真或假）。我已经验证了后端，它确实有效。缺少的部分是我的角度应用程序。

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()返回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中的服务接收一个布尔值，但它只返回整个对象

1 个答案: