Sunday 30 April 2017

Add authentication token in every http request call in angular js applications

In this post we are going to see how to pass the authentication token in every http request call in angular js application

authService:
*************
 mvcapp.service('authService', ['$localStorage', '$rootScope',function ($localStorage,$rootScope) {

    this.getAuthCode = function () {
        return $localStorage.authuser;
    }

    this.setAuthCode = function (authdata) {
        $localStorage.authuser = authdata;
    }

    this.removeAuthCode = function () {
        delete $localStorage.authuser;       
        var loggeduser = { Status: '', Username: '', Authcode: '' };
        $rootScope.$broadcast('loguser', loggeduser);
    }

    this.isLoggedIn = function () {
        return $localStorage.authuser != null && $localStorage.authuser.Authcode != null;
    }


}]);




Factory:
*********
mvcapp.factory('httpRequest', ['$q', 'authService', function ($q, authService) {

    var _interceptors = {
        request: function (config) {
            if (angular.isObject(config)) {
                config.delay = new Date().getTime();
                var loggedin = authService.getAuthCode();

                if (loggedin!=undefined && loggedin.Authcode != null)
                    config.headers["Authorization"] = "Bearer " + loggedin.Authcode;

            }
            return config;
        },
        response: function (response) {
            if (angular.isObject(response.config)) {
                response.config.delay = new Date().getTime() - response.config.delay;
            }
            return response;
        },
        requestError: function (config) {
            if (angular.isObject(config)) {
                config.delay = new Date().getTime();
            }
            return $q.reject(config);
        },
        responseError: function (response) {
            if (angular.isObject(response.config)) {
                response.config.delay = new Date().getTime() - response.config.delay;
            }
            return $q.reject(response);
        }
    };

    return _interceptors;

}]);



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



From this post you can learn how to pass the authentication token in every http request call.

How to write a login authentication using stateprovider and authentication for each state in angular js application

In this post we are going to see how to create the login authentication in angular js application in state provider.

First we have to create the states, Then we have to create the variable name authenticate to the states which ever need the authentication

We are creating a hook for $stateChangeStart event , so when ever we change state this will hooked, from there we are checking whether authenticate is required for this state, if it is required then we are invoking the authService for checking the authentication, if failed then we change the state or transition the state to login state.

var mvcapp = angular.module('mvcapp', ['ui.router', 'ngCookies', 'ngStorage',]);


configure states:

******************

mvcapp.config(['$stateProvider', '$urlRouterProvider', '$localStorageProvider',            
               '$locationProvider',
function ($stateProvider, $urlRouterProvider, $localStorageProvider, $locationProvider) {


    $stateProvider.state('home',
        {
            name: 'home',
            url: '/home',
            templateUrl: 'app/templates/home.html',
            controller: 'homeController'
        })
        .state('about',
        {
            name: 'about',
            url: '/about',
            templateUrl: 'app/templates/about.html',
            controller: 'aboutController'
        })
        .state('login',
        {
            name: 'login',
            url: '/login',
            templateUrl: 'app/templates/login.html',
            controller: 'loginController',
            resolve: { signIn: AlreadySignin }
        })
        .state('register',
        {
            name: 'register',
            url: '/register',
            templateUrl: 'app/templates/register.html',
            controller: 'registerController',
            resolve: { signIn: AlreadySignin }
        })
        .state('profile',
        {
            name: 'profile',
            url: '/profile',
            templateUrl: 'app/templates/profile.html',
            controller: 'profileController',
            authenticate: true
        })
        .state('history',
        {
            name: 'history',
            url: '/history',
            templateUrl: 'app/templates/history.html',
            controller: 'historyController',
            authenticate: true
        })       
        .state("default",
        {
            name: 'default',
            url: '/',
            templateUrl: 'app/templates/home.html',
            controller: 'homeController'
        });
        
    $urlRouterProvider.otherwise('/'); 
    $localStorageProvider.setKeyPrefix('mvcapp');
    $locationProvider.html5Mode(false);

}]);



handling exception in global:

********************************
mvcapp.config(['$provide',function ($provide) {
    $provide.decorator('$exceptionHandler', ['$delegate', '$log'
     function ($delegate, $log) {
        return function (exception, cause) {
            $delegate(exception, cause);
            $log.info(exception.message + " (because of " + cause + " )");
        };
    }])
}]);



check for login, if logged in redirect to home:
***************************************************
AlreadySignin.$inject = ['$rootScope','$state', '$location', 'authService'];

function AlreadySignin($rootScope, $state,$location, authService) {
    if (authService.isLoggedIn()) {      
        return $location.path("/home");      
    }

}



Then we have to write logic in statechangestart event in run based on authenticate variable, now we will see what is the authservice, and what logic it resides


mvcapp.run(['$rootScope', '$location', '$http', 'authService', '$state', '$timeout',
  function ($rootScope, $location, $http, authService, $state, $timeout) {

    if (authService.isLoggedIn())
    {
        $http.defaults.headers.common['Authorization'] = 'Bearer ' +
authService.getAuthCode().Authcode;
    }


    function safeApply(scope, fn) {
        (scope.$$phase || scope.$root.$$phase) ? fn() : scope.$apply(fn);
    }


    $rootScope.$on('$stateChangeStart', function (event, toState, toParams,
fromState, fromParams) {

        if (toState.authenticate && !authService.isLoggedIn()) {
            // User isn’t authenticated
            $state.transitionTo("login");           
            $rootScope.redirect = toState.name;
            event.preventDefault();
        }

        if (toState.authenticate && authService.isLoggedIn()) {
            var role = authService.getAuthCode().Role;
           
        }

        safeApply($rootScope, function () {
            $timeout(function () {
                $rootScope.$broadcast('updatelogin');
            })          
        });

       

    });


}]);





authService:
*************


mvcapp.service('authService', ['$localStorage', '$rootScope',

function ($localStorage,$rootScope) {

    this.getAuthCode = function () {
        return $localStorage.authuser;
    }

    this.setAuthCode = function (authdata) {
        $localStorage.authuser = authdata;
    }

    this.removeAuthCode = function () {
        delete $localStorage.authuser;       
        var loggeduser = { Status: '', Username: '', Authcode: '' };
        $rootScope.$broadcast('loguser', loggeduser);
    }

    this.isLoggedIn = function () {
        return $localStorage.authuser != null && $localStorage.authuser.Authcode != null;
    }



}]);


Output:
*************





















From this post you can learn how to add the authentication for each state in the angular js applications