mysql - How to handle role based authorization in AngularJS? -

i creating web app satisfy 2 requirements users. note: new angularjs web development platform.

front-end - 1: search functionality users can search specific documents , studies based on keyword search , filters. has been implemented using mysql fetching data , display using angularjs.

front-end - 2: users have option create account on web app. purpose of account is:

1. save search queries.
2. if administrator associates each user specific role, users access options such modifying documents present in database uploading new documents , host of other pages.

my question:

how handle role based authorization in angularjs? not able figure out how create framework involves following functionalities: - users role associated them - prevent users accessing pages or functionalities not associated roles

i have read on few articles tutorials every tutorial ends author saying role based authorization should handled on server side , understand why true.

it great if can point me tutorials or write-ups has role-based authorization implemented on server side angularjs.

thanks!

i use role based authorization on backend on frontend. since using ui-router routing, best resource found (and improved needs) article:

link expired

if use ui router, check out. need set routes security , intercept route changes. article includes directive hiding user interface elements, if user doesn't have permission access content behind it.

---

edit: adding code.

first, need have user's permissions stored somewhere, e.g. on user object serialized in localstorage:

{"id":1,"name":"user","created_at":"2016-04-17 18:58:19","gender":"m","roles":["admin"]} 

then, have 2 important parts:

• directive - determine if element should visible or not based on assigned permission
• service - handle authorization checking

directive:

(function() {   'use strict';    angular     .module('app')     .directive('access', access);    /** @nginject */   function access(authorization) {     var directive = {       restrict: 'a',       link: linkfunc,     };      return directive;      /** @nginject */     function linkfunc($scope, $element, $attrs) {       var makevisible = function () {         $element.removeclass('hidden');       };        var makehidden = function () {         $element.addclass('hidden');       };        var determinevisibility = function (resetfirst) {         var result;          if (resetfirst) {           makevisible();         }          result = authorization.authorize(true, roles, $attrs.accesspermissiontype);          if (result === authorization.constants.authorised) {           makevisible();         } else {           makehidden();         }       };        var roles = $attrs.access.split(',');        if (roles.length > 0) {           determinevisibility(true);       }     }   }  })(); 

you need set css elements class hidden not visible.

service:

(function() {   'use strict';    angular     .module('app')     .factory('authorization', authorization);    /** @nginject */   function authorization($rootscope) {     var service = {       authorize: authorize,       constants: {         authorised: 0,         loginrequired: 1,         notauthorised: 2       }     };      return service;      function authorize(loginrequired, requiredpermissions, permissionchecktype) {       var result = service.constants.authorised,           user = $rootscope.currentuser,           loweredpermissions = [],           haspermission = true,           permission;        permissionchecktype = permissionchecktype || 'atleastone';        if (loginrequired === true && user === undefined) {           result = service.constants.loginrequired;        } else if ((loginrequired === true && user !== undefined) &&                   (requiredpermissions === undefined || requiredpermissions.length === 0)) {           result = service.constants.authorised;        } else if (requiredpermissions) {            loweredpermissions = [];            angular.foreach(user.roles, function (permission) {               loweredpermissions.push(permission.tolowercase());           });            (var = 0; < requiredpermissions.length; += 1) {               permission = requiredpermissions[i].tolowercase();                if (permissionchecktype === 'combinationrequired') {                   haspermission = haspermission && loweredpermissions.indexof(permission) > -1;                   // if permissions required , haspermission false there no point carrying on                   if (haspermission === false) {                       break;                   }               } else if (permissionchecktype === 'atleastone') {                   haspermission = loweredpermissions.indexof(permission) > -1;                   // if need 1 of permissions , have there no point carrying on                   if (haspermission) {                       break;                   }               }           }            result = haspermission ?                    service.constants.authorised :                    service.constants.notauthorised;       }        return result;     }   } })(); 

now, can use directive show/hide element:

<a ui-sref="app.administration" class="btn btn-primary pull-right" access="admin">administration</a> 

of course hide element in dom, must authorization check on server too.

this first part solved showing/hiding elements in user interface can protect app routes.

route definition:

(function() {   'use strict';    angular     .module('app')     .config(routeconfig);    /** @nginject */   function routeconfig($stateprovider) {     $stateprovider       .state('app.dashboard', {         url: '/dashboard',         data: {           access: {             loginrequired: true           }         },         templateurl: 'template_path',         controller: 'dashboardcontroller vm'       }   } })(); 

and check permission in $statechangestart event

(function() {   'use strict';    angular     .module('app')     .run(runblock);    /** @nginject */   function runblock($rootscope, $state, authorization) {     $rootscope.$on('$statechangestart', function(event, tostate) {       // route authorization check       if (tostate.data !== undefined && tostate.data.access !== undefined) {         authorised = authorization.authorize(tostate.data.access.loginrequired,                                              tostate.data.access.requiredpermissions,                                              tostate.data.access.permissionchecktype);          if (authorised === authorization.constants.loginrequired) {           event.preventdefault();           $state.go('app.login');         } else if (authorised === authorization.constants.notauthorised) {           event.preventdefault();           $state.go('app.dashboard');         }       }     });   }  })();