我正在用角度5中的身份验证保护功能来检查用户是否应该能够导航到特定页面。我收到与返回可观察值有关的错误:
声明类型既不是“ void”也不是“ any”的函数必须返回值。
这是我的authguard.ts
从“ @ angular / core”导入{Injectable}; 从'@ 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的新手,我认为我在返回可观察值方面犯了一个错误,但是我有点挣扎。任何帮助将不胜感激。
答案 0 :(得分:4)
这将解决您的问题。
您的问题是您没有返回任何内容,并且正在订阅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;
}
}));
};
答案 1 :(得分:0)
如果您查看CanActivate方法,则其返回类型为boolean,它应该是可观察的。 另外,也可以使用.map代替订阅,并根据需要返回Observable。
希望,这会有所帮助。谢谢。