等待AngularJS $ http中的响应

Question

好的，所以我很确定我已经多次找到了答案 - 我只是不明白。

我正在构建一个单页应用程序，在每个$routeChangeStart上检查用户是否已登录。如果用户未登录，则重定向到登录页面。我的问题是configService.isLoggedIn()正在使用$http，这意味着它是异步的，其余代码不会等待它被解析。

简而言之：我需要在继续使用任何其他代码之前解决isLoggedIn()函数。

我在$q.defer()上看到了很多，但我无法绕过它。

提前致谢。

app.service('configService', ['$http', '$q', '$location', '$rootScope', function ($http, $q, $location, $rootScope) {
    var self = this;

    this.isLoggedIn = function () {
        $http.get('/internalAPI.php?fn=login').then(function (result) {
            if (result.data.isLoggedIn === true) {
                $rootScope.isLoggedIn = true;
            }
            else {
                $rootScope.isLoggedIn = false;
            }
        }, function() {
            $rootScope.isLoggedIn = false;
        });
        return $rootScope.isLoggedIn;
    }
}]);

app.service('navigationService', ['$rootScope', '$location', '$timeout', 'configService', function ($rootScope, $location, $timeout, configService) {

    var self = this;

    $rootScope.$on('$routeChangeStart', function (event, next, current) {
        if (configService.isLoggedIn() !== true) {
            // no logged in user, redirect to /login
            if (next.templateUrl != "resources/views/login.php") {
                $location.path("/login");
                $rootScope.subTitle = 'Login';
            }
        //user is logged in but is trying to view the login page, redirect
        } else if (next.templateUrl == 'resources/views/login.php') {
            $location.path('/');
        }

Answer 1

您可以从函数返回promise并对此promise对象进行操作。根据Angular $http documentation，$http对象基于promise mechanism

app.service('configService', ['$http', function ($http) {
    var self = this;

    this.isLoggedIn = function () {
        return $http.get('/internalAPI.php?fn=login');
    }
}]);

app.service('navigationService', ['$rootScope', '$location', '$timeout', 'configService', function ($rootScope, $location, $timeout, configService) {

    var self = this;

    $rootScope.$on('$routeChangeStart', function (event, next, current) {
        configService.isLoggedIn().then(function(result) {
            if (result !== true) {
                // no logged in user, redirect to /login
                if (next.templateUrl != "resources/views/login.php") {
                    $location.path("/login");
                    $rootScope.subTitle = 'Login';
                }
            //user is logged in but is trying to view the login page, redirect
            } else if (next.templateUrl == 'resources/views/login.php') {
                $location.path('/');
            }
        }
    }
}

Answer 2

非常感谢。寻找Rene M.提到的关于构建拦截器并让服务器端脚本处理身份验证的方法。

绝对可行，如果返回403状态，则将用户重定向到登录页面并更新isLoggedIn变量。重构代码以删除rootScope的使用，这是一个肮脏的解决方法，直到我得到了整个角度身份验证方式的挂起。

下面附上一个简单的例子，以防将来有人偶然发现这个问题。

app.config(['$routeProvider', '$locationProvider', '$httpProvider', function ($routeProvider, $locationProvider, $httpProvider) {
    $httpProvider.interceptors.push('responseObserver');

app.factory('responseObserver', ['$location', '$q', function ($location, $q) {
    return {
        'responseError': function (errorResponse) {
            switch (errorResponse.status) {
            case 403:
                //Place logic here
                break;
            case 500:
                //Place logic here
                break;
            }
            return $q.reject(errorResponse);
        }
    };
}]);