為什么Angular 2的CanActivate會返回一個Observable <boolean> 而不是承諾？

Question

CanActivate類允許Observable<boolean>返回類型。

對我來說唯一有用的用例是：

1. CanActivate可以“異步”阻止正在顯示的路由，直到調用observer.next(true|false) 。
2. 我可以顯示CanActivate允許的路徑，然后從我的應用程序的另一部分推送observer.next(false)並使該路徑消失。

但是，第一點有效但不是第二點。 因此，我找不到CanActivate應該允許返回類型的Observable<boolean>而不是方便的原因 - 這反過來使API復雜化。 如果CanActivate只允許boolean返回類型和Promise那將更加清晰。

請注意，我是Angular，RxJS以及基於Node的新手，所以我可能會忽略這一點。 我花了一些時間嘗試從CanActivate中提取Observer<boolean>返回類型暗示的功能。

Answer 1

在AngularJS 2中，幾乎每個異步操作都返回Observable。 因為您可以實現自己的CanActivate，所以您可能希望通過服務器訪問來實現。 例如，檢查服務器中的管理員憑據。 你可以在這里看到類似的例子。

如果此方法返回了布爾數據類型，則需要阻止頁面才能執行此操作。

Answer 2

它允許您執行一些異步過程。 想象一下，您有一個來自身份驗證服務的currentUser observable。 它是一個ReplaySubscriber(1); 並且將始終返回當前登錄的用戶，但是當您的應用首次加載時，auth調用可能仍在處理，因此您不知道它是否完整。

CanActivate() {
  return this.currentUser.map(user => user && user.isActive());
}

Answer 3

在Angular 7中， canActivate可以返回Observable ， Promise和一個boolean ，這也是HTTP調用的情況，所以你可以返回任何適合你的類型，對我來說，我使用它們如下：

如果是Observable ：

public getCats(): Observable<Cat[]> {

    return this.http.get<Cat[]>(this.catsUrl, this.getHttpOptions()).pipe(
      tap(_ => this.log('fetched cats')),
      catchError(this.handleError())
    );
  }

在canActivate情況下，我使用了Promise<boolean>以及HTTP調用，如下所示：

canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Promise<boolean> {
    const currentUser = this.getCurrentUser();
    if (currentUser) {
        return this.http.post<any>(this.validateUserUrl, this.userData).toPromise().then(
            response => 
            {
                return true;
            }
        ).catch(
            error=>
            {
                this.logout()
                return false;
            }
        );
    }
    return new Promise<boolean>(()=> {return false;});
}