Angularjs resource handling response & custom methods

Question

Is it possible within the AuthService to handle the response and set the session with the SessionService?

I doing it in the controller right now with the success callback but I'm still new to Angularjs and trying to understand how to customize a resource.

I'm using Angularjs 1.1.5

app.factory('AuthService', ['$resource', 'SessionService',
function($resource, SessionService) {

    return $resource(
        '/api/v1/auth/:action',
        {action:'@action'},
        {
            login: {
                method:'POST',
                params: {
                    action: 'login'
                }
            },
            logout: {
                method:'GET',
                params: {
                    action: 'logout'
                }
            }
        }
    );
}
]);

app.controller('LoginCtrl', ['$scope', '$location', 'AuthService', 'SessionService' function LoginCtrl($scope, $location, AuthService, SessionService) {

$scope.credentials = { email: "", password: ""};

$scope.login = function() {
    AuthService.login($scope.credentials).success(function() {
        SessionService.set('authenticated', true);
        $location.path('/home');
    });
}
}]);

app.factory("SessionService", function() {
 return {
  get: function(key) {
   return sessionStorage.getItem(key);
  },
  set: function(key, val) {
   return sessionStorage.setItem(key, val);
  },
  unset: function(key) {
   return sessionStorage.removeItem(key);
  }
 }
});

can't understand what your question mean. Can you post the code of the controller ? — fabmilo
– fabmilo, Commented Nov 1, 2013 at 17:46

Daniel Tabuenca · Accepted Answer · 2013-11-02 07:28:54Z

1

I'm not sure that $resource is the appropriate abstraction to use here. I think it would be much simpler to implement your AuthService using plain $http. Just implement login and logout as normal function, then you can feel free to do whatever you want there. You should also make sure you return the promise, that way whoever calls login() or logout() can still do .then() on it if they need to do additional things after login. Here's an example:

app.factory('AuthService', ['$http', '$location' 'SessionService',
function($http, $location, SessionService) {
     var baseUrl = '/api/v1/auth/';

     function onLoginSuccess(data){
            SessionService.set('authenticated', true);
            $location.path('/home');
     }

     function onLoginFailure(error){
       SessionService.unset('authenticated');
       $location.path('/login');
     }


    return {
      login: function(credentials){
          return $http.post(baseUrl+'login', credential).then(onLoginSuccess, onLoginFailure);
      }

      logout: function(){
          return $http.get(baseUrl+'logout');
      }
    };

app.controller('LoginCtrl', ['$scope', 'AuthService', function LoginCtrl($scope, AuthService) {
    $scope.credentials = { email: "", password: ""};
    $scope.login = function() {
        AuthService.login($scope.credentials);      
    }
}]);

app.factory("SessionService", function() {
 return {
  get: function(key) {
   return sessionStorage.getItem(key);
  },
  set: function(key, val) {
   return sessionStorage.setItem(key, val);
  },
  unset: function(key) {
   return sessionStorage.removeItem(key);
  }
 }
});

answered Nov 2, 2013 at 7:28

Daniel Tabuenca

13.7k3 gold badges40 silver badges43 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Sabourinov Over a year ago

This is what I'm doing right now. Can I have the same logic with a resource?

Daniel Tabuenca Over a year ago

There's no real value or reason to use resource in your case. Is there a particular reason you really want to use $resource ?

Daniel Tabuenca Over a year ago

You could add additional methods to your resource before returning it from your AuthService, but then you would be returning both a high and low level api from the service. The way I do it in my answer is return an object with just high level login/logout methods, therefore hiding the underlying implementation.

Kobkrit Viriyayudhakorn · Accepted Answer · 2013-11-02 04:47:20Z

Your server side script on path /api/v1/auth/login should return a result to indicate that the login is successfully granted or not.

For example, If the log in is granted, then /api/v1/auth/login returns the success response 200. If the login is denied, then /api/v1/auth/login returns the bad request response (failure) 400.

If with this condition, your code should be written as followed,

app.controller('LoginCtrl', ['$scope', '$location', 'AuthService', 'SessionService'
function LoginCtrl($scope, $location, AuthService, SessionService) {
    $scope.credentials = { email: "", password: ""};
    $scope.login = function() {
    AuthService.login($scope.credentials, function(data) { //Success callback
        SessionService.set('authenticated', true);
        $location.path('/home');
    }, function(error){ //Failure callback
        SessionService.unset('authenticated');
        $location.path('/login');
    });
}
}]);

Collectives™ on Stack Overflow

Angularjs resource handling response & custom methods

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related