Angular2:路由器事件:路线卫队前NavigationCancel已解决(Angular2:

2019-10-29 17:41发布

我有一个由实现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;
        }
    }

所以,当我登陆,当我试图访问一个页面(即我在记逻辑块是在配置变量未设置**** 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);
                    });


文章来源: Angular2: Router Event: NavigationCancel before Route Guard has resolved