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中解决此问题？谢谢你的到来。

EDIT 我已经检查了IE，EDGE，Firefox，其中没有问题。 Chrome仅适用于开发者控制台打开。

Answer 1

这对我来说似乎是一个异步问题。

在你守卫你正在返回return this.getDataFromApi(state.url)，然后当这个结算时，你再次尝试返回return result;。这意味着你的警卫实际上已经返回result。

我建议设置一个服务来处理登录和保持身份验证状态。此服务可能包含isLoggedIn: bool，roles: Role[]等属性

然后，在您看来，如果用户isLoggedIn（或类似的东西），您可以使用该服务进行简单检查。如果用户已通过身份验证，则返回true，否则，您将其重定向到登录页面。如果用户已登录，请检查用户是否获得了正确的角色（使用服务中预先加载的角色），然后相应地返回true或false。

看看official docs，他们有一个很好的例子。

canActivate返回false并仍然转到屏幕Angular 2

1 个答案: