Angular的ui-router,可以在其他解决之前解决一个身份验证检查



当在ui-router中使用解析时,是否有可能在其他状态解析开始之前先解析(例如身份验证检查)?

这是我现在如何做我的身份验证检查的一个例子:

angular.module('Example', [
    'ui.router',
    'services.auth',
    'services.api'
])
.config(['$stateProvider', function ($stateProvider) {
    $stateProvider.state('order', {
        url: '/order',
        views: {
            'main': {
                templateUrl: 'order/order.tpl.html',
                controller: 'OrderCtrl'
            }
        },
        resolve: {
            // I want this one to resolve before any of the others even start.
            loggedIn: ['auth', function (auth) {
                return auth.loggedIn();
            }],
            cards: ['api', function (api) {
                return api.getCards();
            }],
            shippingAddresses: ['api', function (api) {
                return api.getShippingAddresses();
            }]
        }
    });
}]);

我希望loggedIncardsshippingAddresses开始之前先解决。

我可以把其他API调用放在控制器中(这就是它们之前的位置),但我希望从它们中检索到的数据在模板开始呈现之前可用。

这可能工作,但我不能注入每个单独的API调用的解析值。

...
resolve: {
    // I want this one to resolve before any of the others even start.
    loggedIn: ['auth', 'api', function (auth, api) {
        return auth.loggedIn()
            .then(api.getCards())
            .then(api.getShippingAddresses())
            .then(function () {
                // whatever....
            });
    }]
}
...
编辑:

看起来这里的答案解决了我的问题,也许这不是解决这个问题的最好方法,但它有效。

只需注入身份验证检查的解析值,它将等待,直到它被解析,然后继续进行其他解析。

...
resolve: {
    // I want this one to resolve before any of the others even start.
    loggedIn: ['auth', function (auth) {
        return auth.loggedIn();
    }],
    cards: ['api', 'loggedIn', function (api, loggedIn) {
        return api.getCards();
    }],
    shippingAddresses: ['api', 'loggedIn', function (api, loggedIn) {
        return api.getShippingAddresses();
    }]
}
...

我想自己回答这个问题,但我将留给其他人提供他们的解决方案。

我已经提供了一些关于如何将承诺组合在一起的概念证明:http://jsfiddle.net/pP7Uh/1/任何拒绝将阻止调用下一个then方法

resolve: {
    data: function (api) {
        var state;
        return api.loggedIn().then(function(loggedIn) {
            state = loggedIn
            return api.getCards();
        }).then(function(getCards) {
            return {
                loggedIn: state,
                getCards: getCards
            }
        }).catch(function(error) {
            console.error('error', error)
        });
    }
}

在数据解析对象之后,您将有:

 {
  loggedIn:"calling loggedIn",
  getCards:"calling getCards"
 }

相关内容

  • 没有找到相关文章

最新更新