javascript - 在 $stateChangeStart 触发之前解决抽象父级中的 promise

Question

我试图在加载 Home 子状态之前解析抽象父状态中的一些服务器端数据。我想确保在州的 data.rule 函数中我有用户的全名以供检查。但是，使用 console.log 语句，我可以看到 userFullName 在 factory.privilegeData 方法中的“done”语句之前作为空字符串打印到控制台。

编辑

父解析中的数据是来自服务器的安全数据，在初始化任何 Controller 之前需要全局可用。这里只列出了一个子状态(为了便于阅读)，但是 login 之外的所有状态都是抽象父级的子级。一旦父级的解析完成，数据将存储在 $rootScope 中，并用于通过每个状态中的 data.rule 函数确定访问权限。

config.js

更新:下面的每个答案我都更新了父/子状态，但是我仍然遇到同样的问题:

        .state('app', {
            url:'',
            abstract: true,
            template: '<div ui-view class="slide-animation"></div>',
            resolve:{
                privileges: ['$q', 'privilegesService', function($q, privilegesService){
                    console.log('from parent resolve');
                    return privilegesService.getPrivileges()
                                            .then(privilegesService.privilegesData)
                                            .catch(privilegesService.getPrivilegesError);
                }]
            }
        })
        .state('app.home', {
            url: '/home',
            templateUrl: 'app/components/home/home.html',
            controller: 'HomeController',
            controllerAs: 'vm',
            parent: 'app',
            resolvePolicy: {when:'LAZY', async: 'WAIT'},
            authenticate: true,
            data:{
                rule: function($rootScope){
                    console.log("from home state data rule");
                    return true;
                }
            }                   
        })

privilegesService.js

factory.getPrivileges = function () {
    console.log('from server call');
    var queryString = "&cmd=privilege&action=user";
    return $http.get(config.serviceBaseUri + queryString);
};  

factory.privilegesData = function(priv){
    console.log('from privilege data');
    if(priv && priv.data) {
        $rootScope.userFullName = priv.data.firstName + ' ' + priv.data.lastName;
    }
        console.log('done');
};

根据上面的 console 语句，我得到以下输出。我需要 from home state data rule 最后出现...

...因为我正在使用 data.rule 函数的结果对每个状态进行授权。下面是我的 .run 方法

中的 $stateChangeStart

app.route.js

    $rootScope.$on("$stateChangeStart", function (event, toState, toParams, fromState, fromParams) {
        if(toState.authenticate){
            if(authService.authKeyExists()){
                if(toState.data.rule($rootScope)){
                    navigationService.addNavObject("activity", {
                        summary : "Page navigation",
                        page : $location.absUrl().replace("#/", "")
                    });
                } else {
                    $state.go('app.home');
                }
            } else {
                event.preventDefault();
                $state.go('login');
            }   
        }
    });

Answer 1

子状态需要父状态作为依赖项才能等待加载，即使它不直接使用也是如此。 Source

您必须改为尝试以下操作:

.state('app.home', {
    url: '/home',
    templateUrl: 'app/components/home/home.html',
    controller: 'HomeController',
    controllerAs: 'vm',
    parent: 'app',
    authenticate: true,
    data:{
        rule: function($rootScope){
            console.log($rootScope.userFullName);
            return true;
        }
    }                   
})

您可以使用属性 resolvepolicy 并将其也设置为 LAZY，一个状态的 LAZY 解析将等待父状态的解析完成后再开始加载。