使用 UI 路由器解析防止 Angular 控制器加载

Question

我正在尝试使用承诺来防止在 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 基本上是这样的，仅供参考：

.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 请求返回时，您最终会重定向，这就是您看到闪烁的原因。