暂停转换并在异步调用后重新启动

时间:2014-01-19 01:26:04

标签: angularjs angular-ui-router

我想检查用户是否在每次转换到状态时都被记录,或者它的父亲有一些isLogged数据属性。我的代码是:

        service.watchHasAccess = function(){
        $rootScope.$on('$stateChangeStart', function(event,toState,toStateParams){
            if(typeof toState.data !=='undefined' && typeof toState.data.loggedIn !== 'undefined' && toState.data.loggedIn == true){
                api.getWithPromise('user/isLoggedIn').then(function(response){
                    if(response.status !=='OK'){
                        event.preventDefault();
                        FlashMessage.showError('Zaloguj się aby przejść tutaj.');
                        $state.go('MainPage');                            
                    }
                });
            }
        });

问题是,当转换到受限状态时,它会加载,但它几乎会立即重定向到MainPage状态。它就像闪光灯。这是因为我使用异步请求所以我假设状态只是转换,无论请求的结果是什么,但随后响应来了,我正在转换。我想要实现的是等到promise得到解决然后检查并最终将用户重定向到'MainPage'。这可能吗?

1 个答案:

答案 0 :(得分:1)

您需要为您的asyc使用promises,并根据返回的内容解决或拒绝承诺。我建议URL切换将发生在$stateChangeError事件监听器中,这将通过拒绝承诺来触发。您可以将reject([data])中要转到的位置传递给听众。

http://fiddle.jshell.net/L9jxf/2/

某些承诺会在超时(模拟服务器调用)后拒绝

        protected: ['$timeout', '$q', function ($timeout, $q) {
            var deferred = $q.defer();
            $timeout(function () {
                deferred.reject({type:'redirect',location:'401'});
            }, 1000);
            return deferred.promise;
        }]

这会处理拒绝

app.run(function ($rootScope, $state) {
    $rootScope.$on('$stateChangeError', function (e, to, toParams, from, fromParams, error) {
        if (error.type === 'redirect') {
            $state.transitionTo(error.location);
        }
    });
});