How to manage authentication with token in angular.js?

Question

Hi Everyone I created a RESTful API with authentication with token (Rails 4 + Devise), Also I manage the CORS implementation with a gem(rack-cors) but now I would like use the API with angular.js

For this I do this:

var app = angular.module('models');

app.factory('Session',['$resource',function($resource){
    var Session = $resource(
        'http://api.creositios.dev/sessions/:id',
        {},
        {
            create: { method: 'POST'},
            delete: { method: 'DELETE', params: { id: '@id'} }
        }
    );
    return Session;
}]);  

And this is my controller

app = angular.module('controllers');

app.controller('SessionCtrl',['$scope','Session',function($scope,Session){

  $scope.new_session =  function(){
    $scope.session = Session.create({email: 'developer.jimenez@gmail.com', password: '12345678'});
  };

}]);

So far I have not problem with the implementation. My problem is have not idea how to management the Token that return my factory.

What is the good practices for managment the token of user with angular.js and validates the user in the differents controllers in angular.js?

This is my first app with authentication with token. Advice is very appreciate!.

Answer 1

A common practice is to put the security logic in a service and use an httpInterceptor to set the token in your requests.

security service.

angular.module('security')
    .factory('Security', ['$http', function ($http) {

        var token;

        function login(email, password) {
            return $http.post('/auth/login', {email: email, password: password})
                .then(function (response) {

                    if (response.data.token) {
                        token=response.data.token;
                    }
                });
        }

        function getToken(){
            return token;
        }

        return {
            login:login,
            token:getToken
        };     
}]);

this particular login method could be used by a login controller for example: when the user login the token returned is stored.

Now you can add the token to all your http requests with an interceptor

    .factory('authorizationInterceptor', ['Security', function (Security) {
        return {
            request: function (config) {
                var token=Security.getToken();
                config.headers = config.headers || {};
                if (token) {
                    config.headers.Authorization = 'Bearer ' + token;
                }
                return config;
            }
        };
    }]);

When bootstraping the application, don't forget to add your interceptor

        .config(['$httpProvider',function ($httpProvider) {
            $httpProvider.interceptors.push('authorizationInterceptor');
        }]);

Now the token will be set on every http request, what you do with in case of failure then is up to you.

For example you can add another response interceptor which if get 401 or 403 response redirect to the login page, etc