错误TS2355：声明的类型既不是“ void”也不是“ any”的函数必须返回一个值

Question

我正在用角度5中的身份验证保护功能来检查用户是否应该能够导航到特定页面。 我收到与返回可观察值有关的错误：

声明类型既不是“ void”也不是“ any”的函数必须返回一个值。

这是我的authguard.ts

从“ @ angular / core”导入{可注射}； 从'@ angular / router'导入{Router，CanActivate，ActivatedRoute，ActivatedRouteSnapshot，RouterStateSnapshot}; 从“ ../../service/application-verification.service”导入{ApplicationVerificationService}；

@Injectable() export class AppStatusGuard implements CanActivate {

  applicationId: number;   personId: number;

  constructor(
    public router: Router,
    public readonly activeRoute: ActivatedRoute,
    public readonly applicationVerificationService: ApplicationVerificationService) { }

  loginRoute: boolean;   memberRoute: boolean;


  canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean {

    this.applicationId = Number(route.params["applicationId"]);
    this.personId = Number(route.params["personId"]);

    // Make sure they are allowed on this page, if not re-direct
    const url = this.applicationVerificationService.getRouteForFellowshipApplicant(this.personId, this.applicationId)
      .subscribe((res: string) => {
        console.log(url);

        if (res !== `application-status/${this.personId}/${this.applicationId}`) {
          console.log("failure");
          // this.router.navigateByUrl(url);
          return false;
        } else {
          console.log("success");
          //this.router.navigateByUrl(url);
          return true;
        }
      });   
  }; 
};

这是我的验证服务

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Router } from '@angular/router';
import 'rxjs/Rx';
import { Observable } from 'rxjs/Observable';

@Injectable()
export class ApplicationVerificationService {
  constructor(
    private readonly httpClient: HttpClient,
    private readonly router: Router) { }

  getRouteForFellowshipApplicant(personId, applicationId): Observable<string> {
    this.httpClient.get('api/application-verification/' + personId).subscribe((responseObject: IFellowshipApplicationStatus) => {

      return Observable.create(observer => {

        if (responseObject.preApplicationVerificationStatus === 'GoToTrackerPage') {
          observer.next('application-status/' + personId + '/' + applicationId);
        }
        if (responseObject.preApplicationVerificationStatus === 'GoToApplicationFormPage') {
          observer.next('application-form/' + personId + '/' + applicationId);
        }
        if (responseObject.preApplicationVerificationStatus === 'GoToContactIceForInfoPage') {
          observer.next('contact-us/' + personId + '/' + applicationId);
        }
        if (responseObject.preApplicationVerificationStatus === 'GenericError') {
          observer.next('application-error/' + personId);
        }
        observer.complete();
      });
    });
    return null;
  }
}

我是rxjs的新手，我认为我在返回可观察值方面犯了一个错误，但我仍在挣扎。 任何帮助，将不胜感激。

Answer 1

这样可以解决您的问题。

您的问题是您没有返回任何内容，并且正在订阅HTTP调用。 相反，返回Observable本身，并在您的HTTP调用之后使用pipe(map(...))执行操作，而不会像subscribe一样中断操作链。

return this.applicationVerificationService.getRouteForFellowshipApplicant(this.personId, this.applicationId)
  .pipe(map(res => {
    console.log(url);

    if (res !== `application-status/${this.personId}/${this.applicationId}`) {
      console.log("failure");
      // this.router.navigateByUrl(url);
      return false;
    } else {
      console.log("success");
      //this.router.navigateByUrl(url);
      return true;
    }
  }));   
}; 

Answer 2

如果查看CanActivate方法，其返回类型为boolean，则应为Observable。 同样，除了订阅之外，还可以使用.map并根据需要返回Observable。

希望这可以帮助。 谢谢。