Angular implements system permission Control Based on the routing control ui-router, and angularui-router

Angular implements system permission Control Based on the routing control ui-router, and angularui-router

The front-end permission control may sound a little nonsense (in fact, it is also a little nonsense). It is a major concern for security issues. However, if the front and back-end are separated, A background management system with permission control is required. What should angular do based on ui-router?

Role-Based Access Control (RBAC) is a common design of permissions. The basic idea is that permissions for system operations are not directly granted to specific users, instead, a role set is created between the user set and the permission set. Each role corresponds to a group of permissions.

Once a user is assigned an appropriate role, the user has all operation permissions for this role. The advantage of this is that you do not have to assign permissions each time you create a user. You only need to assign the corresponding role to the user, and the permission change of the role is much less than that of the user, this will simplify user permission management and reduce system overhead.

The front-end management system developed based on angular needs to handle the following situations in terms of permission control:

1. UI, Which pages can be accessed by the role permission of the user but cannot be accessed by the user;

2. Reason: when you are about to jump to a page, if you do not have access to the page, redirect to an error prompt page;

3. http request: whether the user has the permission to access some APIs. If no 403 error is returned

If you want to solve the problem above?

The general idea is:

1. After a user logs on, the user obtains the permission from the server.

2. Create a service to save the pering relationship of the permission. For example, if user a's permission is to view page1 and page2, determine whether the access permission is granted before the route is changed, if there is a normal jump, it will jump to the unified 403 page or other.

3. for http requests, the server can handle them to determine whether the user has the permission to request them.

Obtain the user permission, for example:

var permissionList; angular.element(document).ready(function() {  $.get('/api/UserPermission', function(data) {   permissionList = data;   angular.bootstrap(document, ['App']);  }); }); 

Jquery ajax is used here, because angular has not been started before. If angular is used for logonserverReturnpermissionAnd then save it.

Determine whether the user has a certain permission, for example:

app.factory('permissions', function($rootScope) {    return {      hasPermission: function(permission) {        if (permission) {          if (typeof(permission) == "string") {            if (permissionList.indexOf(permission) > -1) {              return true;            }          }        }        return false;      }    };  });

Route permission control:

app.run(function($rootScope, $location,$state, permissions) {    $rootScope.$on('$stateChangeStart', function(event, toState, toParams, fromState, fromParams) {      var permission = toState.permission;        if (toState.name!="login"&&!permissions.hasPermission(permission)) {        // event.preventDefault();        // $state.transitionTo("login");      }    });  });

// Route configuration app. config (function ($ stateProvider, $ urlRouterProvider, $ controllerProvider) {app. registerController = $ controllerProvider. register; app. loadJs = function (js) {return function ($ rootScope, $ q) {var def = $ q. defer (), deps = []; angular. isArray (js )? (Deps = js): deps. push (js); require (deps, function () {$ rootScope. $ apply (function () {def. resolve () ;}); return def. promise ;};}; $ urlRouterProvider. otherwise ('/login'); $ stateProvider. state ('login', {url: '/login', templateUrl:'/assets/console/pages/login.html ', controller: 'logincontroller', resolve: {deps: app. loadJs ('. /controllers/login ')}); $ stateProvider. state ('index', {url: '/Index', templateUrl:'/assets/console/pages/home.html ', controller: 'indexcontroller', resolve: {deps: app. loadJs ('. /controllers/Index')}, permission: "super_admin "});});

Problems encountered during development:

1. How to refresh the page after login, because our login information is implemented by the server framework and is not completely isolated, the login information is not refreshed after login, you can determine whether to jump from the logon page to the specified page by judging fromState and toState, and then$window.location.reload();To refresh the page as a whole.

2. After the jump, the selected status of the current navigation is updated. After the state is successful, the UI is refreshed.

App. run (['$ rootScope', "$ state", '$ Window',' $ location', '$ log', function ($ rootScope, $ state, $ window, $ location, $ log) {$ rootScope. $ on ('$ stateChangeSuccess', function (evt, toState, roParams, fromState, fromParams) {// refresh the setTimeout (function () {appCommon. initUI () ;}, 500) ;}) ;}]);