Multiple Ajax calls while authorization of angular application

Question

App has two types of roles: 'adam' and 'eve' An user can have one or the other role.

Angular service to get the roles:

app.factory("AuthService",function($http, $q){
    var user = undefined;
    return {
        getRoles : function(){
            var deferred = $q.defer();
            if(user !== undefined){
                deferred.resolve(user.auth);
            }else{
                $http.get("./rest/auth", {
                }).then(function(result){
                    user = result.data;
                    deferred.resolve(user.auth);
                });
            }
            return deferred.promise;
        }
    };
});

Routing is done as follows:

myApp.config(['$routeProvider', function ($routeProvider) {
    $routeProvider
        .when("/adam", {
            templateUrl: 'templates/adam.html',
            controller: 'AController'
        })
        .when("/eve", {
            templateUrl: 'templates/eve.html',
            controller: 'BController'
        })
        .when("/", {
            resolve: {
                load : function($q, $location, AuthService){
                    var defer = $q.defer();
                    AuthService.getRoles().then(function(data){
                        if(data === 'adam'){
                            $location.path('/adam');
                        }else{
                            $location.path('/eve');
                        }
                        defer.resolve();
                    });
                    return defer.promise;
                }
            }
        })
        .otherwise({ redirectTo: '/' });;
}]);

I need to get roles in controller as well to perform certain operation. Controller code:

angular.element(document).ready(function () {
    AuthService.getRoles().then(function(data){
        // some operation
    });
});

On navigating to '/', ajax is called twice since both resolve and controller function calls AuthService.getRoles(). How can i restructure the code so that ajax is called only once?

Answer 1

I would change your factory to something like this so that they hook into the same promise :

app.factory("AuthService", function ($http, $q) {
    var userPromise;
    return {
        getRoles : function () {
            if(!userPromise){
                userPromise = $http.get("./rest/auth", {}).then(function(result){
                    return result.data;
                });
            }

            return userPromise;
        }
    };
});

This creates a promise if it's not set, to get the data. Every call after that will have the promise created so it'll just hook into the initial one and not make subsequent calls. The reason it's not working for you is because your user only gets set after the $http.get so the second time through it still sees it as undefined.