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 。

看看官方文档 ，他们有一个很好的例子来说明这种方法。