Angular2：路由器事件：Route Guard解决之前的NavigationCancel [英] Angular2: Router Event: NavigationCancel before Route Guard has resolved

问题描述

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

I have an application with routes guarded by an AuthGuard that implements CanActivate. Can activate checks to see if user is logged in and then checks if configuration variables are set before returning true or false. If the user is signed in but configuration variables have not been sent, AuthGuard makes an http call to retrieve configuration setup and returns true once the http call has been resolved without error (false otherwise).

问题是路由器在配置呼叫解决之前取消了对请求路由的导航。

The issue is that the Router is cancelling the navigation to the requested route before the configuration call has been resolved.

下面是AuthGuard canActivate方法：

Below is the AuthGuard canActivate method:

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 **** 表示的逻辑块中），我在控制台中看到：

So when I am logged in and the config variables are not set when I try to access a page (i.e. I'm in logical block denoted by **** HERE ****), I see in the console:

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已返回一样假。我想找到一种方法，使AuthGuard在其内部的http调用分辨率下返回其结果。

Before the AuthGuard config http call has a chance to resolve, the navigation is cancelled and the router redirects as if the AuthGuard had returned false. I would like to find a way to have AuthGuard return its result on resolution of the http call within.

推荐答案

遇到此问题后，我通过替换 else 块的内容（从 ***** HERE ******开始）解决了该问题。 ）并包含以下内容：

If anyone else if having this problem, I solved the issue by replacing the contents of the else block (starting with *****HERE******) with the following:

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：路由器事件：Route Guard解决之前的NavigationCancel的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！