Angular based on routing control Ui-router realize system privilege control _ANGULARJS

The front end to achieve the right to control sounds a little bit of nonsense (the actual also a little bit of nonsense), to deceive, is mainly concerned about security issues, but if the separation of the front and back end of the situation, need to do with a control of the background management system, angular based on ui-router should do?

The design of permissions is more common is RBAC role-based access control, the basic idea is that the various permissions on the operation of the system is not directly to give specific users, but in the user set and set up a role set between the sets of permissions. Each role corresponds to a set of appropriate permissions.

Once the user is assigned the appropriate role, the user has all the action rights for the role. The advantage of doing this is that you do not have to assign permissions every time you create a user, as long as you assign the appropriate role to the user, and the role changes more than the user's permissions, which simplifies the user's rights management and reduces the overhead of the system.

The front-end management system based on angular development needs to deal with the following situations in terms of authority control:

1, the UI, the user's corresponding role permissions can access which pages can not access which pages;

2, the reason, when the user is ready to jump to a page, if there is no access to the page, redirect to a false hint page;

3, HTTP request, whether the user has access to certain APIs, if not returned 403

If you deal with the above issues?

The general idea is:

1, after the user logged in from the server to obtain the user's permission

2, and then establish a service to save the mapping of the permission, such as a user's permission is to view the Page1,page2, then the routing changes before the decision to have access to the right, there is a normal jump, No, jump to the Unified 403 page or other.

3, for HTTP requests, you can let the server to process, to determine whether the user has requested permission

Get user permission, for example:

var permissionlist; 
Angular.element (document). Ready (function () { 
 $.get ('/api/userpermission ', function (data) { 
  permissionlist = data; 
  Angular.bootstrap (document, [' App ']); 
 }); 
 

Here is the jquery Ajax, because before this angular has not started, if our login is implemented with angular, can be returned after login server permission , and then saved.

Determine if the user has a permission, such as:

App.factory (' Permissions ', function ($rootScope) {return
    {
      haspermission:function (permission) {
        if ( Permission) {
          if (typeof (permission) = = "string") {
            if (permissionlist.indexof (permission) >-1) {
              return true;
            }
          }
        return false;};
  };

Routing Permission control:

 App.run (function ($rootScope, $location, $state, permissions) {$rootScope. $on (' $stateCh  
      Angestart ', function (event, tostate, Toparams, FromState, fromparams) {var permission = tostate.permission;
        if (tostate.name!= "Login" &&!permissions.haspermission (permission)) {//Event.preventdefault ();
      $state. Transitionto ("login");
  }
    });

}); 

  Routing Configuration app.config (function ($stateProvider, $urlRouterProvider, $controllerProvider) {App.registercontroller = $c
    Ontrollerprovider.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 ', controll
    ER: ' logincontroller ', resolve: {deps:app.loadJs ('./controllers/login ')}}); $stateProvider. State (' index ', {url: '/index ', Templateurl: '/assets/console/pages/home.html ', Controlle R: ' Indexcontroller ', resolve: {deps:app.loadJs ('./controllers/index ')},
      Permission: "Super_admin"});

 });

Problems that are actually encountered during the development process:

1, how to refresh the page after login, because our login information is part of the implementation of the server framework, not completely separate, so login after the login information is not refreshed, you can judge FromState and tostate to determine whether to jump from the login page to the specified page, and then through $window.location.reload(); To achieve the overall refresh of the page.

2, after the jump the current navigation of the selected status update, state successful refresh UI

App.run ([' $rootScope ', "$state", ' $window ', ' $location ', ' $log ', function ($rootScope, $state, $window, $location, $log) {
    $rootScope. $on (' $stateChangeSuccess ',
      function (evt, tostate, Roparams, FromState, fromparams) {
        / Refresh Page settimeout If login is in (
        function () {
          appcommon.initui ();
        },500);
      })
  ;