randombits randombits - 1 year ago 62
Javascript Question

Best practice for ensure user is logged in or out using cookieStore and AngularJS

Right now I am building an AngularJS based application on top of Ruby on Rails and using Devise for authentication. I have the server responding properly when a user authenticates successfully and when authentication fails. I guess my question is, using $cookieStore, what's the best practice for knowing if a user is logged in or not? There is a cookie that gets set by Rails called "myapp_session", but that session doesn't necessarily mean a user is logged in. Looking for ideas on how to use AngularJS to keep user online/offline management. I'll still be ensuring that requests that require authorization get authorized by the backend regardless of the solution.

Answer Source

You can create an directive that set up the logged user when the application loads, for example, requesting the current user session on your server.

angular.module('Auth', [
    .factory('Auth', ['$cookieStore', function ($cookieStore) {

        var _user = {};

        return {

            user : _user,

            set: function (_user) {
                // you can retrive a user setted from another page, like login sucessful page.
                existing_cookie_user = $cookieStore.get('current.user');
                _user =  _user || existing_cookie_user;
                $cookieStore.put('current.user', _user);

            remove: function () {
                $cookieStore.remove('current.user', _user);

And set in your run method in AppController:

   .run(['Auth', 'UserRestService', function run(Auth, UserRestService) {

            var _user = UserRestService.requestCurrentUser();

Of course if any request to the server return an Http Status 401 - Unauthorized, you need to call the Auth.remove() service to remove the user from cookie and redirect the user to login page.

I use this approach and works very well. You can also use the localStorage, but the user data will be persisted for a long time. Unless you set an expiration date for this authentication, I don't see as best practice.

Keep in mind to always verify the user credentials on your server site =)


To listen to 401 - Unauthorized server response, you can put an interceptor on your $http request, like this:

 .config(['$urlRouterProvider', '$routeProvider', '$locationProvider', '$httpProvider', function ($urlRouterProvider, $routeProvider, $locationProvider, $httpProvider) {
        var interceptor = ['$location', '$q', function ($location, $q) {

            function success(response) {
                return response;

            function error(response) {

                if (response.status === 401) {
                    return $q.reject(response);
                else {
                    return $q.reject(response);

            return function (promise) {
                return promise.then(success, error);


Every call with 401 response, the user will be redirected to login page at /login path.

You will find a good example here