How to set the page access permissions in Angularjs _angularjs

Source: Internet
Author: User

In previous projects, the front and rear side of the common way is to provide a page and UI plus a little duangduangduang effect, the back-end frame structure and data interaction (data interaction before and after the intersection), whether it is. NET, Java or PHP can provide a One-to-many front-end services, In the new form, however, the front-end framework is used, the development is not the same, for example, I would like to say this is done under the angular framework of development, the model is the backend service and API documentation, page and data interaction and logic processing by the front-end, the front-end is like a complete programer, In the process, you'll encounter unexpected problems (if you haven't done the backend development), for example, page permission control, have to say, use the way of the front end to do these settings more tangled, because this data, that is, these permissions of the ' mark ', the back-end runtime can be directly obtained, that is, like getting field data a b Click to come out, and the front-end can only be used to obtain the HTTP request, cumbersome trouble;

In fact, there are many ways of doing page access in Ng, each has its pros and cons, the use of more than the interceptor, interceptors make the front end to send HTTP requests before or after doing some operations, such as global monitoring whether the user is logged in, not landing will jump to the login page, login can access the page ; Interceptors are often used in conjunction with background data, that is to get the latest ' logo ' to determine what the page or next page is going to do, and here I use a front-end control, without data interaction, the idea is to define different levels/stages can access the page, in the location of the route to intercept, For a number of different level/stage access permissions defined explicitly can refer to the use of this method, the code is as follows:

... app.run ([' $rootScope ', ' $state ', ' $window ', function ($rootScope, $state, $window) {$rootScope. $on (' $ Statechangestart ', function (event, tostate, Tostateparams) {//user access level stage, 0 1 2 Array.prototype.contains = function (needle {for (i) {if (this[i] = needle) return true;} return false;} var status=new Array ("User.a", "User.b", "user.c",
"USER.D", "USER.E", "User.f", "USER.G");
var status0=new Array ("User.a", "user.b");
var status1=new Array ("User.c", "USER.D"); 
     var status2=new Array ("User.a", "User.b", "user.c", "USER.D"); if (Status.contains (tostate.name)) {if (initobj.getstatus () = = "0") {if (!status0.contains (Tostate.name)) {Event.preve
Ntdefault ();
$state. Go (' user.approve ');
} return; } if (initobj.getstatus () = = "1") {if (!status1.contains (Tostate.name)) {Event.preventdefault (); $state. Go ('
User.result ');
} return; } if (initobj.getstatus () = = "2") {if (!status2.contains (Tostate.name)) {Event.preventdefault (); $state. Go ('
User.result ');
} return; }
}
})
}])
......

As shown in the code, add state listening in Ng's run (I'm using an-route-ui here) to detect when listening to a route jump, where the "tagged" status array is intended to include each level/stage accessible page/route. For example, the status is a complete collection that needs to be tested, STATUS0, 1 2 are different levels/stages of access to the set of permissions, that is, ng middle by the jump of the hash value, also represents the accessible page, using this detection means, no access to users can not access certain pages, For example, user A's hierarchy stage configuration is Status1, including USER.C and User.d,initobj.getstatus () returns his status code is 1, when he wants to visit the USER.A page, will enter the initobj.getstatus () = "1" judgment, but his configuration accessible page does not include USER.A, or!status1.contains (tostate.name) (Tostate.name returns the page to jump, here returns USER.A), Next enters the operation below, enters the public page or the prompt page, the principle basically is this;

Of course, this is a very unsafe way to back-end control, also not rigorous, because even if the project in the script to release compression confusion, the careful browsing still can find the set traces here, and the script before the run is editable, which will cause a lot of loopholes; but in some small projects use these configurations enough , and even if someone modifies this status configuration, the data is requested from the backend, the state is not also requested data, so the database is really black, from the front end of the script to intercept just play test;

Continue to explore other optimization methods, there is a great God has a better way to communicate;

Also, Singles Day, I wish the vast number of single dogs off the list. hehe ~ ~ ~ ~

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.