A login pattern example

README.md

Login patter

Using angularjs + ui router

Logic

Three abstract states:

1. Welcome (static home page)
2. Unlogged (login, logout, register)
3. Logged (application)

Pushing a "login" button inside Welcome will redirect to Unlogged.login. Unlogged.login will check username/password and save them to cookie (at each try, even if it fails).

Prerequisites

• ui router module injected to your app
• There is an injectable logger
• Ui router will resolve a user object inside Logged parent route.
• This user object has a "set" method to save last form data inside a cookie and use them
• This user object has a "logIn" method to check the cookie
• Logged parent defines a "$state.permissions" to specify if a route requires login and admin privileges

Four operations are needed

1. Login function inside a login controller used by Unlogged.login
2. A check for logged cookie inside the ui router resolver of the main Logged abstract state
3. A check at every route change, via ui router broadcast interception
4. A timeout to check every minute if the actual cookie is authorized

This last step is under development...

login_controller.js

// Login controller function to check logging from "Unlogged" state
$scope.login = function(data) {

    // Try
    user.set(data);
    // Force login to save cookie
    user.logIn(true).then(function(reference) {

        if (reference.isLogged()) {
            $scope.loginError = null;
            logger.debug("Logged");
            $state.go('logged.main');
        // Invalid
        } else {
            $scope.loginError = reference.getError();
        }
    });
}

main_controller.js

// At every completed route change
$rootScope.$on('$stateChangeSuccess',
 function(event, toState, toParams, fromState, fromParams){

    // Do no checks if login is not required
    if (!toState.permissions.requireLogin)
        return;

    // Check if logged
    if (!user.isLogged()) {
        logger.warn("Not authorized");
        $state.go('unlogged.dologin', {status: 'user'});
    }

    // Check if admin
    if (toState.permissions.requireAdmin && !user.isAdmin()) {
        logger.warn("Not admin");
        // use a timeout to avoid ui router loops
        $timeout(function(){ $state.go('logged.main');});
    }
})

routes.js

// LOGGED ABSTRACT ROUTE: Set the current user for the whole application
resolve: {
    cookie: function(Authentication) { return Authentication.get(); },
    user: function(Account, cookie, $state) {
        var userObj = Account.getItem(cookie);

        // AUTHENTICATION: First check on entering main
        //if ($state.data.requireLogin) {}
        return userObj.get().then(function(user){
            // if not...
            if (!user.isLogged()) {
                console.log("Go away:",user);
                // status will direct me to login or register
                $state.go('unlogged.login', {status: 'user'});
            }
            return user;
        });
    },
}