这个问题与这个问题有某种关系 1 , 2 ,但他们没有以对我有帮助的方式解决 javascript 中同步可观察对象的主题。
我目前处于 Angular 4 或只是 Angular ,我有一条 protected 路线等待两名守卫解决。他们两个按预期返回 true 但第二个花费的时间太长,因此答案是在 canActivate 方法完成后出现的。下面的示例代码。我该怎么做才能等待我的第二个守卫同步解决?
我是这种 javascript 和可观察异步处理方式的新手!对不起,如果这个问题很愚蠢。
第一个 authGuard:
canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean { if(this.cookieService.check('token'))return true; console.log(true); //For demostration purpose }
第二个 authGuard:
canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean { this.roleService.checkRole('admin') // this service take some time .subscribe( response=>{ //Simple logic checking the response. console.log(true); return true; }, error=>{ //some logic with the error console.log(false); return false; } ) console.log('End of authguard method'); }
Angular 色服务:
checkRole(role:string): boolean { return this.http.post(Url, body,requestOptions) .map(this.processData) .catch(this.handleError); }
4.控制台显示:
true // from authGuard 1
"End of authguard method" // from authGuard 2
true // from authGuard 2
由于第二个真来得太晚,路由器无法导航到所需的路线。我还在订阅之前尝试了 first()
运算符,并且第一个运算符不等待 role.Service 中的 observable 来解析。
最佳答案
CanActivate
的接口(interface)是
interface CanActivate {
canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<boolean>|Promise<boolean>|boolean
}
这意味着除了原始 bool 值外,它还将接受 Promise
或 Observable
的返回类型。您面临的问题是您试图将 Observable 视为 bool 值,但事实并非如此。您应该将第二个 authGuard 重构为:
canActivate(
route: ActivatedRouteSnapshot,
state: RouterStateSnapshot
): Observable<boolean> {
return this.roleService
.checkRole('admin') // this service take some time
// Any success value is mapped to true
.mapTo(true)
// Any error will log and return false
.catch(e => {
console.log('Encountered an error checking role', e);
return Observable.of(false);
})
// This logs when this *actually* completes
.finally(() => console.log('End of authguard method'));
}
我们需要执行上述操作的原因是因为作为一般模式,我们不知道 Observable
何时会发出,我们只知道它发出时我们想做什么。我们不是试图为返回分配一个单一的值,而是实际上返回一个将最终完成的工作流水线。
关于javascript - 在 JavaScript 中使用同步可观察对象,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45271851/