Angular2：路由器事件：Route Guard解决之前的NavigationCancel

Question

我有一个应用程序，该应用程序的路由由实现CanActivate的AuthGuard保护。 可以激活检查以查看用户是否已登录，然后在返回true或false之前检查是否设置了配置变量。 如果用户已登录，但尚未发送配置变量，则AuthGuard进行http调用以检索配置设置，并在解析完http调用而没有错误后返回true（否则返回false）。

问题是路由器在配置呼叫已解决之前正在取消导航到所请求的路由。

以下是AuthGuard canActivate方法：

canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) {

        let authenticated = this.isAuthenticated();

        if (authenticated) {
            console.log("User authenticated, checking for configs...");
            if (this.config.defined) {
                console.log("Config defined!");
                return true;
            } else {
                ***** HERE ******
                console.log("Config not defined, setting configs...");
                this.authService.setConfig()
                    .take(1)
                    .subscribe(
                        config => {
                            // SET CONFIG VARIABLES
                            console.log("Config variables set");

                            // allow route access
                            return true;
                        },
                        err => {
                            console.error(err);
                            this.router.navigate(['/Login']);
                            return false;
                        }
                    );
                this.router.navigate(['/Login']);
                return false;
            }
        } else {
            console.log("User not authenticated, back to login");
            this.router.navigate(['/Login']);
            return false;
        }
    }

因此，当我登录并且尝试访问页面时未设置config变量时（即，我处于**** HERE ****表示的逻辑块中），我在控制台中看到：

Setting config...

NavigationCancel {id: 1, url: "/", reason: ""}

NavigationStart {id: 2, url: "/Login"}

RoutesRecognized {id: 2, url: "/Login", urlAfterRedirects: "/Login", state: RouterStateSnapshot}

NavigationEnd {id: 2, url: "/Login", urlAfterRedirects: "/Login"}

Config variables set

在AuthGuard配置http调用有机会解决之前，将取消导航，并且路由器将重定向，就像AuthGuard返回false一样。 我想找到一种方法，使AuthGuard在其内部的http调用分辨率下返回其结果。

Answer 1

如果还有其他人遇到此问题，我通过将else块（以*****HERE******开头）的内容替换为以下内容来解决了该问题：

return this.authService.setConfig()
                    .map(
                    config => {
                        // SET CONFIG VARIABLES
                        console.log("Config variables set");

                        // allow route access
                        return true;
                    })
                    .catch(err => {
                        console.error(err);
                        this.router.navigate(['/Login']);
                        return Observable.of(false);
                    });