How to handle security in angularjs

refer this link :https://docs.angularjs.org/guide/security

Step 1: Define Global Variables in app-module

Define roles for the application:

These are the roles which you would like to keep for authorization in the application. It is necessary to keep them global as these would be used by both at App module scope and service scope.

var roles = { superUser: 0, admin: 1, user: 2 };

Define route for unauthorized access for the application:

This is the route where you would want the user to go, if he is not authorized to see any page.

We would be using this variable later, in the App module routes.

var routeForUnauthorizedAccess = '/SomeAngularRouteForUnauthorizedAccess';

Step 2: Define the Service for Authorization

This is the heart of the whole authorization. Angular service (or factory) is singleton and persisted across different routes of application, for a given user session. We can leverage this feature of service to do authorization on different routes. In order for you to create the service, you would need a service (like Web API) at server side, which can give you a set of roles for a given user. Once roles are procured from server side, then Angular service can persist this knowledge to be re-used for all routes, during the session of user. I have tried to explain the service code below with inline comments.

appModule.factory('authorizationService', function ($resource, $q, $rootScope, $location) {
return {
// We would cache the permission for the session,
//to avoid roundtrip to server
//for subsequent requests
permissionModel: {
permission: {},
isPermissionLoaded: false
},
permissionCheck: function (roleCollection) {
// we will return a promise .
var deferred = $q.defer();
//this is just to keep a pointer to parent scope from within promise scope.
var parentPointer = this;
//Checking if permission object(list of roles for logged in user)
//is already filled from service
if (this.permissionModel.isPermissionLoaded) {
//Check if the current user has required role to access the route
this.getPermission(this.permissionModel, roleCollection, deferred);
} else {
//if permission is not obtained yet, we will get it from server.
// 'api/permissionService' is the path of server web service , used for this example.
$resource('/api/permissionService').get().$promise.then(function (response) {
//when server service responds then we will fill the permission object
parentPointer.permissionModel.permission = response;
//Indicator is set to true that permission object is filled and
//can be re-used for subsequent route request for the session of the user
parentPointer.permissionModel.isPermissionLoaded = true;
//Check if the current user has required role to access the route
parentPointer.getPermission(parentPointer.permissionModel, roleCollection, deferred);
});
}
return deferred.promise;
},
//Method to check if the current user has required role to access the route
//'permissionModel' has permission information obtained from server for current user
//'roleCollection' is the list of roles which are authorized to access route
//'deferred' is the object through which we shall resolve promise
getPermission: function (permissionModel, roleCollection, deferred) {
var ifPermissionPassed = false;
angular.forEach(roleCollection, function (role) {
switch (role) {
case roles.superUser:
if (permissionModel.permission.isSuperUser) {
ifPermissionPassed = true;
}
break;
case roles.admin:
if (permissionModel.permission.isAdministrator) {
ifPermissionPassed = true;
}
break;
case roles.user:
if (permissionModel.permission.isUser) {
ifPermissionPassed = true;
}
break;
default:
ifPermissionPassed = false;
}
});
if (!ifPermissionPassed) {
//If user does not have required access,
//we will route the user to unauthorized access page
$location.path(routeForUnauthorizedAccess);
//As there could be some delay when location change event happens,
//we will keep a watch on $locationChangeSuccess event
// and would resolve promise when this event occurs.
$rootScope.$on('$locationChangeSuccess', function (next, current) {
deferred.resolve();
});
} else {
deferred.resolve();
}
}
};
});

Step 3: Use Security in Routing

Let's use all our hard work done so far to secure the routes. So far, we created a service which is capable of checking if a user falls under a particular role or not. This knowledge can be used in the angular routes now. In the angular module, where we define routes, we can put these checks to see if the user has access to any of the roles specified for a route. I have put combinations of roles in these routes, to ensure better understanding.

var appModule = angular.module("appModule", ['ngRoute', 'ngResource'])
.config(function($routeProvider, $locationProvider) {
$routeProvider
.when('/superUserSpecificRoute', {
templateUrl: '/templates/superUser.html', //path of the view/template of route
caseInsensitiveMatch: true,
controller: 'superUserController', //controller which would be used for the route
resolve: { //Here we would use all the hardwork we have done
//above and make call to the authorization Service
//resolve is a great feature in angular, which ensures that a route
//controller (in this case superUserController ) is invoked for a route
//only after the promises mentioned under it are resolved.
permission: function(authorizationService, $route) {
return authorizationService.permissionCheck([roles.superUser]);
},
}
})
.when('/userSpecificRoute', {
templateUrl: '/templates/user.html',
caseInsensitiveMatch: true,
controller: 'userController',
resolve: {
permission: function(authorizationService, $route) {
return authorizationService.permissionCheck([roles.user]);
},
}
})
.when('/adminSpecificRoute', {
templateUrl: '/templates/admin.html',
caseInsensitiveMatch: true,
controller: 'adminController',
resolve: {
permission: function(authorizationService, $route) {
return authorizationService.permissionCheck([roles.admin]);
},
}
})
.when('/adminSuperUserSpecificRoute', {
templateUrl: '/templates/adminSuperUser.html',
caseInsensitiveMatch: true,
controller: 'adminSuperUserController',
resolve: {
permission: function(authorizationService, $route) {
return authorizationService.permissionCheck([roles.admin, roles.superUser]);
},
}
})
// Route for unauthorized access (When permission is not given to visit a page)
.when(routeForUnauthorizedAccess,
{
templateUrl: '/templates/UnauthorizedAccess.html',
caseInsensitiveMatch: true
})
});

1 Reply

Know the answer? Post it — somebody with the same question will find it here.

Mukil Vendhan9y ago
Accepted answer
refer this link :https://docs.angularjs.org/guide/security
Step 1: Define Global Variables in app-module
Define roles for the application:

These are the roles which you would like to keep for authorization in the application. It is necessary to keep them global as these would be used by both at App module scope and service scope.

var roles = {       superUser: 0,       admin: 1,       user: 2   };

Define route for unauthorized access for the application:
This is the route where you would want the user to go, if he is not authorized to see any page.

We would be using this variable later, in the App module routes.

var routeForUnauthorizedAccess = '/SomeAngularRouteForUnauthorizedAccess';

Step 2: Define the Service for Authorization
This is the heart of the whole authorization. Angular service (or factory) is singleton and persisted across different routes of application, for a given user session. We can leverage this feature of service to do authorization on different routes. In order for you to create the service, you would need a service (like Web API) at server side, which can give you a set of roles for a given user. Once roles are procured from server side, then Angular service can persist this knowledge to be re-used for all routes, during the session of user. I have tried to explain the service code below with inline comments.

appModule.factory('authorizationService', function ($resource, $q, $rootScope, $location) {

    return {

        // We would cache the permission for the session,

        //to avoid roundtrip to server

        //for subsequent requests



        permissionModel: {

            permission: {},

            isPermissionLoaded: false

        },



        permissionCheck: function (roleCollection) {



            // we will return a promise .

            var deferred = $q.defer();



            //this is just to keep a pointer to parent scope from within promise scope.

            var parentPointer = this;



            //Checking if permission object(list of roles for logged in user)

            //is already filled from service

            if (this.permissionModel.isPermissionLoaded) {

                //Check if the current user has required role to access the route

                this.getPermission(this.permissionModel, roleCollection, deferred);

            } else {

                //if permission is not obtained yet, we will get it from  server.

                // 'api/permissionService' is the path of server web service , used for this example.



                $resource('/api/permissionService').get().$promise.then(function (response) {

                    //when server service responds then we will fill the permission object

                    parentPointer.permissionModel.permission = response;



                    //Indicator is set to true that permission object is filled and

                    //can be re-used for subsequent route request for the session of the user

                    parentPointer.permissionModel.isPermissionLoaded = true;



                    //Check if the current user has required role to access the route

                    parentPointer.getPermission(parentPointer.permissionModel, roleCollection, deferred);

                });

            }

            return deferred.promise;

        },



        //Method to check if the current user has required role to access the route

        //'permissionModel' has permission information obtained from server for current user

        //'roleCollection' is the list of roles which are authorized to access route

        //'deferred' is the object through which we shall resolve promise

        getPermission: function (permissionModel, roleCollection, deferred) {

            var ifPermissionPassed = false;



            angular.forEach(roleCollection, function (role) {

                switch (role) {

                    case roles.superUser:

                        if (permissionModel.permission.isSuperUser) {

                            ifPermissionPassed = true;

                        }

                        break;

                    case roles.admin:

                        if (permissionModel.permission.isAdministrator) {

                            ifPermissionPassed = true;

                        }

                        break;

                    case roles.user:

                        if (permissionModel.permission.isUser) {

                            ifPermissionPassed = true;

                        }

                        break;

                    default:

                        ifPermissionPassed = false;

                }

            });

            if (!ifPermissionPassed) {

                //If user does not have required access,

                //we will route the user to unauthorized access page

                $location.path(routeForUnauthorizedAccess);

                //As there could be some delay when location change event happens,

                //we will keep a watch on $locationChangeSuccess event

                // and would resolve promise when this event occurs.

                $rootScope.$on('$locationChangeSuccess', function (next, current) {

                    deferred.resolve();

                });

            } else {

                deferred.resolve();

            }

        }

    };

});

Step 3: Use Security in Routing
Let's use all our hard work done so far to secure the routes. So far, we created a service which is capable of checking if a user falls under a particular role or not. This knowledge can be used in the angular routes now. In the angular module, where we define routes, we can put these checks to see if the user has access to any of the roles specified for a route. I have put combinations of roles in these routes, to ensure better understanding.

var appModule = angular.module("appModule", ['ngRoute', 'ngResource'])

.config(function($routeProvider, $locationProvider) {

    $routeProvider

        .when('/superUserSpecificRoute', {

            templateUrl: '/templates/superUser.html', //path of the view/template of route

            caseInsensitiveMatch: true,

            controller: 'superUserController', //controller which would be used for the route

            resolve: { //Here we would use all the hardwork we have done

                //above and make call to the authorization Service

                //resolve is a great feature in angular, which ensures that a route

                //controller (in this case superUserController ) is invoked for a route

                //only after the promises mentioned under it are resolved.

                permission: function(authorizationService, $route) {

                    return authorizationService.permissionCheck([roles.superUser]);

                },

            }

        })

        .when('/userSpecificRoute', {

            templateUrl: '/templates/user.html',

            caseInsensitiveMatch: true,

            controller: 'userController',

            resolve: {

                permission: function(authorizationService, $route) {

                    return authorizationService.permissionCheck([roles.user]);

                },

            }

        })

        .when('/adminSpecificRoute', {

            templateUrl: '/templates/admin.html',

            caseInsensitiveMatch: true,

            controller: 'adminController',

            resolve: {

                permission: function(authorizationService, $route) {

                    return authorizationService.permissionCheck([roles.admin]);

                },

            }

        })

        .when('/adminSuperUserSpecificRoute', {

            templateUrl: '/templates/adminSuperUser.html',

            caseInsensitiveMatch: true,

            controller: 'adminSuperUserController',

            resolve: {

                permission: function(authorizationService, $route) {

                    return authorizationService.permissionCheck([roles.admin, roles.superUser]);

                },

            }

        })

        // Route for unauthorized access (When permission is not given to visit a page)

        .when(routeForUnauthorizedAccess,

           {

            templateUrl: '/templates/UnauthorizedAccess.html',



           caseInsensitiveMatch: true

         })

});
+1