javascript - 使用 UI Router resolve 阻止 Angular Controller 加载

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
                }

            });
        } 
    }

})

此方案根据身份验证结果重定向用户，但看起来，在身份验证失败时，在用户重定向到“未找到”状态之前， Controller 仍在加载一小段时间.

我相信原因是因为我在 resolve 中运行 AuthService，但是以异步方式。因此， Controller 在 AuthService 执行其操作时加载，但在回调函数执行后被重定向。

但是 resolve 不是本来就应该是阻塞的吗？也就是说，在 resolve 被“解决”之前， Controller 不会加载？

AuthService 基本上就是这样，仅供引用:

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

    this.validate = function(token){

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

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

Answer 1

您应该立即返回 promise ，而不是在服务响应返回后才这样做:

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

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