Question

我尝试使用promise来阻止在UI路由器$resolve中加载状态。

$stateProvider.state('base.restricted', {

    url:'/restricted',
    templateUrl: 'views/restricted.html',
    controller: 'restrictedCtrl',

    resolve: { // user must be logged-in to proceed

        // authentication service checks session on back-end
        authenticate: function ($q, $state, $timeout, AuthService){

            AuthService.validate(token).then(function(res){ 

                if( res.data.response.status===1 ) { // authenticated!

                    return $q.resolve(); // load state

                } else { // authentication failed :(

                    $timeout(function() { $state.go('base.notfound') }); // load not found page
                    return $q.reject(); // do not load state
                }

            });
        } 
    }

})

此方案在根据身份验证结果重定向用户方面起作用，但看起来，在身份验证失败后，控制器仍然在用户被重定向到“未找到”状态之前暂时加载。

我相信原因是因为我在解析中运行AuthService，但是以异步方式运行。因此控制器在AuthService执行其操作时加载，但一旦执行回调函数，就会重定向。

但是resolve本身不应该被阻止？也就是说，在resolve“解决”之前，控制器才会加载？

AuthService基本上是这样的，fyi：

.service('AuthService', function($http){

    this.validate = function(token){

        return $http.get('http://my.api/validate/'+token);
    }
});

如何修改此代码以防止在AuthService的回调函数完成之前加载。

Answer 1

您应该立即返回一个承诺，而不是在服务响应回来后这样做：

return AuthService.validate(token).then(function(res){ ... }

否则路由器看不到返回值而不是promise，因此它认为加载状态是可以的。然后，当您的AJAX请求返回时，您最终会重定向，这就是您看到闪烁的原因。

使用UI Router解决方案阻止Angular控制器加载

1 个答案: