Angular using UI router to implement system permissions control and development encountered problems _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 also used angular implementation, you can log in after the server to return to permission, and then save.

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 (' $stateChangeStart ', 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 = $
Controllerprovider.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 ', Controller: '
Logincontroller ', resolve: {deps:app.loadJs ('./controllers/login ')}}); $stateProvider. State (' index ', {URL:'/index ', Templateurl: '/assets/console/pages/home.html ', controller: ' 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 the $ 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);
})
;

The above is a small set to introduce the angular in the use of UI router to implement system permissions control and development encounter problems, I hope to help you, if you have any questions please give me a message, small series will promptly reply to everyone. Here also thank you very much for the cloud Habitat Community website support!