AngularJS is used to perform security processing on routes.

AngularJS is used to perform security processing on routes.

Introduction

AngularJS has been used for a long time since its appearance. It is a javascript framework used to develop SPA applications. It has some good features, such as bidirectional binding and instructions. This article mainly introduces Angular routing security policies. It is a Client Security Framework developed and implemented by Angular. I have tested it. In addition to ensuring client route security, you also need to ensure the security of server access. The Client Security policy helps reduce additional access to the server. However, if some users access the server by spoofing the browser, the server security policy should be able to deny unauthorized access. In this article, I will only discuss client security policies.

1. Define global variables at the application module level

Define roles for applications:
 

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

Define an unauthorized access route for the application:

var routeForUnauthorizedAccess = '/SomeAngularRouteForUnauthorizedAccess';

2. Define Authorization Service
 

AppModule. factory ('authorizationservice', function ($ resource, $ q, $ rootScope, $ location) {return {// cache permissions to the Session, to prevent requests from constantly accessing the server permissionModel: {permission :{}, isPermissionLoaded: false}, permissionCheck: function (roleCollection) {// return a promise (promise ). var deferred = $ q. defer (); // here, only a pointer pointing to the upper-level scope is saved in the promised scope. Var parentPointer = this; // check whether the permission object has been obtained from the Service (list of logged-on user roles) if (this. permissionModel. isPermissionLoaded) {// check whether the current user has the permission to access the current route this. getPermission (this. permissionModel, roleCollection, deferred);} else {// if you do not have permission on the object, we will get it from the server. // 'Api/permissionservice' is the web service address in this example. $ Resource ('/api/permissionService '). get (). $ promise. then (function (response) {// when the server returns, we start to fill in the permission object parentPointer. permissionModel. permission = response; // set the mark of the permission object processing to true and save it to the Session. // users in the Session can reuse the permission object parentPointer in subsequent route requests. permissionModel. isPermissionLoaded = true; // check whether the current user has a required role to access the route parentPointer. getPermission (parentPointer. permissionModel, roleCollection, deferred) ;});} re Turn deferred. promise;}, // method: check whether the current user has a required role to access this route. // The 'permissionmodel' stores the role information of the current user returned from the server. // the 'role collection' stores the list of roles that can access the current route/ /'referred' is used to process the promised object getPermission: function (permissionModel, roleCollection, deferred) {var ifPermissionPassed = false; angular. forEach (roleCollection, function (role) {switch (role) {case roles. superUser: if (permissionModel. permission. isSuperUser) {ifPermissionPas Sed = 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 the user does not have the required permissions, we direct the user to the page $ location. path (routeForUnauthorizedAccess); // because of this processing delay, the page location may change during this period, // We will always monitor the $ locationChangeSuccess event // and when this event occurs, we will remove the commitment. $ RootScope. $ on ('$ locationChangeSuccess', function (next, current) {deferred. resolve () ;}) ;}else {deferred. resolve ();}}};});

3. Encrypted Routing

Then let's encrypt the route with our efforts:
 

Var appModule = angular. module ("appModule", ['ngroup', 'ngresource']). config (function ($ routeProvider, $ locationProvider) {$ routeProvider. when ('/superUserSpecificRoute', {templateUrl: '/templates/superUser.html', // The routing view/template path caseInsensitiveMatch: true, controller: 'superusercontroller ', // The angular controller resolve: {// here we will use the above results. Calling the Authorization Service // resolve is a very nice feature of angular, ensure that // The Controller (superUserController in this example) is applied to the route only after the commitment mentioned below is processed. 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', priority: true, controller: 'adminsuperusercontroller', resolve: {permission: function (authorizationService, $ route) {return authorizationService. permissionCheck ([roles. admin, roles. superUser]) ;},}}) ;});