javascript - 在 JavaScript 中使用同步可观察对象

Question

这个问题与这个问题有某种关系 1 , 2 ，但他们没有以对我有帮助的方式解决 javascript 中同步可观察对象的主题。

我目前处于 Angular 4 或只是 Angular ，我有一条 protected 路线等待两名守卫解决。他们两个按预期返回 true 但第二个花费的时间太长，因此答案是在 canActivate 方法完成后出现的。下面的示例代码。我该怎么做才能等待我的第二个守卫同步解决？

我是这种 javascript 和可观察异步处理方式的新手!对不起，如果这个问题很愚蠢。

1. 第一个 authGuard:

   canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): 
   boolean {
        if(this.cookieService.check('token'))return true;
        console.log(true); //For demostration purpose
   }
   

2. 第二个 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');
   }
   

3. 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 来解析。

Answer 1

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 何时会发出，我们只知道它发出时我们想做什么。我们不是试图为返回分配一个单一的值，而是实际上返回一个将最终完成的工作流水线。