Angular canActive with observable

Question

我在保护中使用canActivate方法。我的内心有一个可观察的东西，它给了我一个物体。此对象有密码。我检查了密码，如果是正确的，我希望canActivate返回true，如果不是，则返回false。

这是代码

canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) {
const uid = route.params.userId;
const hackId = route.params.hackId;
const token = this.authService.token;
const queryParamsPassword = route.queryParams.password;
this.hacksStorageService.fetchHack(token, uid, hackId)
.subscribe(
hack => {
const hackPassword = hack[0].password;
if (queryParamsPassword === hackPassword ) {
return true
} else {
this.router.navigate(["/"]);
return false
}
},
error => {
return false;
}
)
}

我很难理解对方的反应。无论何时完成，我都必须做出回应。一旦我从订阅中获得值，我就想在canActivate中返回布尔值。

我得到的错误是在canActivate方法上(红色(

[ts]
Property 'canActivate' in type 'RoleGuard' is not assignable to the same property in base type 'CanActivate'.
Type '(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) => void' is not assignable to type '(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) => boolean | Observable<boolean> | Pr...'.
Type 'void' is not assignable to type 'boolean | Observable<boolean> | Promise<boolean>'.

我以为我会在if的每一个分支中返回，所以这应该足够了，但显然不是。如果我退回订阅，他也会抱怨。

有什么帮助吗？非常感谢。

Answer 1

您的方法必须返回一些东西。它什么也不回。

它可以返回布尔值。只有当您知道要同步返回的值时，这才有可能。但是你需要一个异步调用来知道结果应该是什么。所以你不能返回布尔值。这就是为什么警卫也可以返回Observable<boolean>。所以，这样做：

return this.hacksStorageService.fetchHack(token, uid, hackId).pipe(
map(hack => {
const hackPassword = hack[0].password;
if (queryParamsPassword === hackPassword ) {
return true;
} else {
this.router.navigate(["/"]);
return false;
}
})
);