等待可觀察訂閱Angelar2

Question

在我的Angular2應用程序中，我使用canActivate來允許訪問頁面。 其中一部分是與服務器檢查令牌沒有被篡改，所以在我可以決定天氣用戶可以被授予訪問權限之前，我需要調用我的API。 這意味着訂閱Observable並等待答案。

我需要返回真或假，但由於我做了一個asyns調用，我不能根據我的迴應返回。 我意識到我不能等待，因爲它是單線程，但我需要以某種方式阻止，直到我有一個答案從API。 我canActivate如下所示：

canActivate() { 
    this.guardClient.checkToken("token") 
    .subscribe(response => { 
    let responseText = response.text().replace(/"/g, ''); 
    if (responseText === 'Ok') 
    { 
     return true; 
    } 
    if(responseText === 'denied') { 

     this.router.navigate(['login']); // redirecting to login 
     return false; 
    } 
    }); 
} 

有人能告訴我如何解決這個問題？

Answer 1

當在角2 CanActivate接口的樣子，我看到以下內容：

export interface CanActivate { 
    canActivate(route: ActivatedRouteSnapshot, state:  RouterStateSnapshot): Observable<boolean> | Promise<boolean> | boolean; 
} 

正如你所看到的，你可以只返回一個可觀察爲好，而不僅僅是一個布爾值。 這意味着你的代碼可以被重寫成這樣。

canActivate() { 
return this.guardClient.checkToken("token") 
    .map(response => { 
    let responseText = response.text().replace(/"/g, ''); 
    if (responseText === ' Ok') 
     { 
     return true; 
     } 
    if(responseText === 'denied') { 
     this.router.navigate(['login']); // redirecting to login 
     return false; 
    } 
}); 
} 

這將使Angular等待observable解析，然後再決定是否可以顯示路由。 請注意，此方法應該非常快以避免緩慢加載。