Angular implements permission control in the frontend and backend separation mode-Based on RBAC (1)

Angular implements permission control in the frontend and backend separation mode-Based on RBAC (1)

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.

In a single page application built by Angular, we need to do more to implement such an architecture. In terms of the overall project, there are about three places where front-end engineers need to deal with it.

1. UI processing (based on the user's permissions, determine whether some content on the page is displayed)

2. Route processing (when a user accesses a url that he or she does not have the permission to access, he or she jumps to an error prompt page)

3. HTTP request processing (when we send a data request, if the returned status is 401 or 401, it is usually redirected to an error page)

How to implement it?

First, you need to obtain all the permissions of the current user before Angular starts. Then, you can store the ing through a service in an elegant way. whether the content on a page processed by the UI is displayed based on permissions should be implemented through a direve ve. after processing this, we also need to add a "permission" attribute to a route, and assign a value to it to indicate which permissions the role can jump to this URL, then, Angular listens to the routeChangeStart event to verify whether the current user has the access permission for this URL. finally, an HTTP interceptor is required to monitor the status returned by a request, which is 401 or 403.

In general, the work seems to be a little more, but it is quite easy to handle it one by one.

Get the permission ing before Angular runs.

The Angular project is started through ng-app, but in some cases we want the Angular project to be started under our control. for example, in this case, I want to get all the permission mappings of the currently logged-on user and then start the Angular App. fortunately, Angular provides this method, that is, angular. bootstrap ().

 
 

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

You may notice that $ is used here. get (). jQuery is not the $ resource or $ http of Angular, because Angular has not been started yet and its function cannot be used yet.

The above code can be further used to put the obtained ing relationship into a service as a global variable.

 
 

  
  
// app.js  
  
  
var app = angular.module('myApp', []), permissionList;  
  
  
    
  
  
app.run(function(permissions) {  
  
  
  permissions.setPermissions(permissionList)  
  
  
});  
  
  
    
  
  
angular.element(document).ready(function() {  
  
  
  $.get('/api/UserPermission', function(data) {  
  
  
    permissionList = data;  
  
  
    angular.bootstrap(document, ['App']);  
  
  
  });  
  
  
});  
  
  
   
  
  
// common_service.js  
  
  
angular.module('myApp')  
  
  
  .factory('permissions', function ($rootScope) {  
  
  
    var permissionList;  
  
  
    return {  
  
  
      setPermissions: function(permissions) {  
  
  
        permissionList = permissions;  
  
  
        $rootScope.$broadcast('permissionsChanged')  
  
  
      }  
  
  
   };  
  
  
  }); 
 
 

After obtaining the permissions set of the current user, We archive the set to the corresponding service, and then did two things:

(1) store permissions in the factory variable to keep it in the memory, so as to implement the global variable, but it does not pollute the namespace.

(2) broadcast events through $ broadcast when the permissions are changed.

How to determine the explicit permission of the UI component

Here we need to write a direve ve by ourselves, which will display or hide elements based on the permission relationship.

 
 

  
  
<!-- If the user has edit permission the show a link -->  
  
  
<div has-permission='Edit'>  
  
  
  <a href="/#/courses/{{ id }}/edit"> {{ name }}</a>  
  
  
</div>  
  
  
    
  
  
<!-- If the user doesn't have edit permission then show text only (Note the "!" before "Edit") -->  
  
  
<div has-permission='!Edit'>  
  
  
  {{ name }}  
  
  
</div> 
 
 

Here we can see that the ideal situation is to pass through an has-permission attribute to verify the permission name. If the current user has one, it will be displayed. If not, it will be hidden.

 
 

  
  
angular.module('myApp').directive('hasPermission', function(permissions) {  
  
  
  return {  
  
  
    link: function(scope, element, attrs) {  
  
  
      if(!_.isString(attrs.hasPermission))  
  
  
        throw "hasPermission value must be a string";  
  
  
    
  
  
      var value = attrs.hasPermission.trim();  
  
  
      var notPermissionFlag = value[0] === '!';  
  
  
      if(notPermissionFlag) {  
  
  
        value = value.slice(1).trim();  
  
  
      }  
  
  
    
  
  
      function toggleVisibilityBasedOnPermission() {  
  
  
        var hasPermission = permissions.hasPermission(value);  
  
  
    
  
  
        if(hasPermission && !notPermissionFlag || !hasPermission && notPermissionFlag)  
  
  
          element.show();  
  
  
        else 
  
  
          element.hide();  
  
  
      }  
  
  
      toggleVisibilityBasedOnPermission();  
  
  
      scope.$on('permissionsChanged', toggleVisibilityBasedOnPermission);  
  
  
    }  
  
  
  };  
  
  
}); 
 
 

Extend the previous factory:

 
 

  
  
angular.module('myApp')  
  
  
  .factory('permissions', function ($rootScope) {  
  
  
    var permissionList;  
  
  
    return {  
  
  
      setPermissions: function(permissions) {  
  
  
        permissionList = permissions;  
  
  
        $rootScope.$broadcast('permissionsChanged')  
  
  
      },  
  
  
      hasPermission: function (permission) {  
  
  
        permission = permission.trim();  
  
  
        return _.some(permissionList, function(item) {  
  
  
          if(_.isString(item.Name))  
  
  
            return item.Name.trim() === permission  
  
  
        });  
  
  
      }  
  
  
   };  
  
  
  });