canActivate返回false並仍然轉到屏幕Angular 2

Question

我有一個問題，我的canActivate方法返回false並仍然導航到被屏蔽的屏幕。 此問題僅出現在Chrome中，而在IE中，一切都按預期工作。 canActivate方法看起來像這樣：

canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) {
    return this.getDataFromApi(state.url)
        .toPromise()
        .then(result=> { 
            return result;
        });
}

和getDataFromApi（）：

getDataFromApi(link): Observable<boolean> {
    return this.http.get("api/security")
                    .map(response => {
                        var url = link.replace("/", "");
                        var data = response.json();
                        var privileges = data["privileges"];
                        var currentItem = privileges[url];
                        return currentItem["view"];
                    });
}

有沒有辦法在Chrome中解決此問題？ 謝謝你的提前。

編輯我已經在IE，EDGE，Firefox中檢查過哪里沒有問題。 Chrome僅適用於開發者控制台打開。

Answer 1

這看起來像是一個異步問題。

在你守衛你正在返回return this.getDataFromApi(state.url) ，然后當這個結算時，你再次嘗試返回return result; 。 這意味着你的后衛實際上已經返回result 。

我建議設置一個服務來處理登錄和保持身份驗證狀態。 此服務可能具有isLoggedIn: bool ， roles: Role[]等屬性。

然后，在您看來，如果用戶是isLoggedIn （或類似的東西），您可以使用服務進行簡單檢查。 如果用戶已通過身份驗證，則返回true，否則，您將其重定向到登錄頁面。 如果用戶已登錄，請檢查用戶是否獲得了正確的角色（服務中預先加載的角色），然后相應地返回true或false 。

看看官方文檔 ，他們有一個很好的例子來說明這種方法。