Methods of using ANGULARJS to safely handle routing

This article mainly introduces the use of ANGULARJS for security processing methods, Angularjs is a highly popular JavaScript library, the need for friends can refer to the

Brief introduction

Since its advent, ANGULARJS has been in use for a long time. It is a JavaScript framework for developing a single-page application (SPA). It has some very good features, such as two-way binding, instructions, and so on. This article mainly introduces the angular routing security policy. It is a client-side security framework that can be implemented with angular development. I've tested it. In addition to ensuring client routing security, you also need to secure server-side access. The client security policy helps reduce additional access to the server. However, if someone accesses the server using a deceptive browser, the server-side security policy should be able to deny unauthorized access. In this article, I only discuss the client security policy.

 defining global variables at the application module level

To define a role for an application:

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

To define routes that are not granted access for an application:

var routeforunauthorizedaccess = '/someangularrouteforunauthorizedaccess ';

Defining the Licensing service

Appmodule.factory (' Authorizationservice ', function ($resource, $q, $rootScope, $location) {return {//cache permissions to session to avoid Free of subsequent requests non-stop Access server Permissionmodel: {permission: {}, Ispermissionloaded:false},   Permissioncheck:function (Rolecolle ction) {//Return a commitment (promise). var deferred = $q. Defer ()  //This is just a pointer to an upper-level scope in the scope of the commitment. var parentpointer = this;   Check to see if the current user has permission to access the current route from the service to the permission object (the role list of the logged-in user) if (this.permissionModel.isPermissionLoaded) { // This.getpermission (This.permissionmodel, rolecollection, deferred); else {//If there is no permission object, we will go to the server to get it. ' Api/permissionservice ' is the Web service address in this example.   $resource ('/api/permissionservice '). Get (). $promise. Then (function (response) {//When the server returns, we begin populating the permission object ParentPointer.permissionModel.permission = response;  //To set the tag of the Permission object processing complete to True and save the user in session,//session, and reuse the permission object in subsequent routing requests ParentPointer.permissionModel.isPermissionLoaded = true;   Check whether the current user has the necessary role to access the route parentpointer.getpermission (Parentpointer.permissionmoDel, rolecollection, deferred); } ); return deferred.promise;  /methods: Check if the current user has a role to access the route//' Permissionmodel ' saves the role information of the current user returned from the server//' rolecollection ' saved a list of roles that can access the current route//' Deferred ' is the object used to process the commitment getpermission:function (Permissionmodel, rolecollection, deferred) {var ifpermissionpassed = False ;   Angular.foreach (rolecollection, function) {switch (role) {Case Roles.superUser:if (permissionmodel.permis Sion.issuperuser) {ifpermissionpassed = true;} break; Case Roles.admin:if (permissionModel.permission.isAdministrator) {ifpermissionpassed = true;}; Case Roles.user:if (permissionModel.permission.isUser) {ifpermissionpassed = true;}; default:ifpermissionpassed = false; } }); if (!ifpermissionpassed) {//If the user does not have the necessary permissions, we will boot the user to the page $location. Path (routeforunauthorizedaccess); The page position may change during this period,//we will always monitor $locationChangeSuccess events//And when the event occurs, the commitment is resolved. $rootScope. $on (' $locationChangeSuccess ', function (next, current) {deferred.resolve ();}); else {deferred.resolve ();}} }; });

3 Encrypted routing

And then let's use our efforts to encrypt the route:

; > var appmodule = Angular.module ("Appmodule", [' Ngroute ', ' Ngresource ']). config (function ($routeProvider, $ Locationprovider) {$routeProvider. When ('/superuserspecificroute ', {templateurl: '/templates/superuser.html ',//routed View/template path Caseinsensitivematch:true, controller: ' Superusercontroller ',//Routing Angular controller resolve: {//In this we will use our The effort above, invoking the authorization service//resolve is a very nice feature in angular that ensures//only applies the controller (in this case, Superusercontroller) to the route only if 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 ', caseinsensitivematch:true, Controller: ' Adminsuperusercontroller ', resolve: {permission:function (Authorizationservice, $route) {return Authorizationservice.permissioncheck ([Roles.admin, Roles.superuser]); }, } }); });