Handling private states within AngularJS applications


One typical task when we work with AngularJs application is login, and private states. We can create different states in our application. Something like this:

    .config(function ($stateProvider, $urlRouterProvider) {
        $stateProvider
            .state('state1', {
                url: '/state1',
                templateUrl: templates/state1.html,
                controller: 'State1Controller'
            })
            .state('state2', {
                url: '/state2',
                templateUrl: templates/state2.html,
                controller: 'State2Controller'
            })
        $urlRouterProvider.otherwise('/state1');
    })

One way to create private states is using $stateChangeStart event. We can mark our private states with state parameters:

    .state('privateState1', {
            url: '/privateState1',
            templateUrl: templates/privateState1.html,
            controller: 'PrivateState1Controller',
            data: {
                isPublic: false
            }
        })

And then we can check out this parameters within $stateChangeStart event, doing one thing or another depending on token is present or not

    .run(function ($rootScope) {
        $rootScope.$on("$stateChangeStart", function (event, toState) {
            if (toState.data && toState.data.isPublic) {
                // do something here with localstorage and auth token
            }
        });
    })

This method works, but last days, reading one project of Aaron K Saunders at github, I just realised that there’s another method. We can listen to $stateChangeError. Let me show you how can we do it.

The idea is to use resolve in our private states. With resolve we can inject objects to our state’s controllers, for example user information. This method is triggered before call to the controller, so that’s a good place to check if token is present. If it isn’t, then we can raise an error. This error will trigger $stateChangeError event, and here we can redirect the user to login state.

It sounds good, but we need to write resolve parameter in every private states, and that’s bored. Especially when all states are private except login state. To by-pass this problem we can use abstract states. The idea is simple, we define one abstract state with “resolve” and then we create our private states under this abstract state.

Here we can see one example: login state isn’t private, but state1 and state2 are private, indeed.

    .config(function ($stateProvider, $urlRouterProvider) {
        .state('login', {
            url: '/login',
            templateUrl: 'templates/login.html',
            controller: 'LoginController'
        })
        .state('private', {
            url: "/private",
            abstract: true,
            template: '<ui-view/>',
            resolve: {
                user: function (UserService) {
                    return UserService.init();
                }
            }
        })
        .state('private.state1', {
            url: '/state1',
            templateUrl: 'templates/state1.html',
            controller: 'State1Controller'
        })
    
        .state('private.state2', {
            url: '/privateState2',
            templateUrl: 'templates/state2.html',
            controller: 'State2Controller'
        });
    
        $urlRouterProvider.otherwise('/private/privateState1');
    })

Our UserService is a AngularJS service. This service provides three methods: init (the method that raises an error if token isn’t present), login (to perform login and validate credentials), and logout (to remove token from localstorage and redirects to login state)

    .service('UserService', function ($q, $state) {
        var user = undefined;

        var UserService = {
            init: function () {
                var deferred = $q.defer();

                // do something here to get user from localstorage

                setTimeout(function () {
                    if (user) {
                        deferred.resolve(user);
                    } else {
                        deferred.reject({error: "noUser"});
                    }
                }, 100);

                return deferred.promise;
            },

            login: function (userName, password) {
                // validate user and password here
            },

            logout: function () {
                // remove token from localstorage
                user = undefined;
                $state.go('login', {});
            }
        };

        return UserService
    })

And finally the magic in $stateChangeError

    .run(function ($rootScope, $state) {
        $rootScope.$on('$stateChangeError',
            function (event, toState, toParams, fromState, fromParams, error) {
                if (error && error.error === "noUser") {
                    $state.go('login', {});
                }
            });
    })

And that’s all. IMHO this solution is cleaner than $stateChangeStart method. What do you think?

WARNING!
Before publishing this post I realize that this technique doesn’t work 100% correctly. Maybe is my implementation but I tried to use it with an ionic application and it doesn’t work with android. Something kinda weird. It works with web applications, it works with IOS, but it doesn’t work with Android. It looks like a bug (not sure about it). Blank screen instead of showing the template (but controller is loaded). We can see this anomalous situation using “ionic serve -l” (IOS ok and Android Not Ok)

To bypass this problem I tried a workaround. instead of using abstract states I create normal states, but to avoid to write again and again the resolve function to mark private states, I create a privateState provider

    .provider('privateState', function () {
        this.$get = function () {
            return {};
        };
    
        this.get = function(obj) {
            return angular.extend({
                resolve: {
                    user: function (UserService) {
                        return UserService.init();
                    }
                }
            }, obj);
        }
    })

Now I can easily create private states without writing ‘resolve’ function.

    .config(function ($stateProvider, $urlRouterProvider, privateStateProvider) {
        $urlRouterProvider.otherwise('/home');

        $stateProvider
            .state('home', privateStateProvider.get({
                url: '/home',
                templateUrl: 'templates/home.html',
                controller: 'HomeController'
            }))
        ;
    })
Advertisements

About Gonzalo Ayuso

Web Architect. PHP, Python, Node, Angular, ionic, PostgreSQL, Linux, ... Always learning.

Posted on March 19, 2015, in AngularJS, js, Technology and tagged , , , . Bookmark the permalink. Leave a comment.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: