使用 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
                }

            });
        } 
    }

})

此方案根据身份验证结果重定向用户，但看起来，在身份验证失败后，在用户重定向到 "not found" 状态。

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

但是 resolve 不是本来就应该是阻塞的吗？也就是说，在 resolve 为 "resolved"?

之前，控制器不会加载

AuthService 基本上就是这样，仅供参考：

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

    this.validate = function(token){

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

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

Answer 1

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

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

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

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

Prevent Angular controller from loading using UI Router resolve

javascript

promise

angularjs

angular-ui-router

angular-promise