Methods of ANGULARJS Authentication _angularjs

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.

In a single page application built by angular, we need to do a little extra work to implement this architecture. From the overall project, about 3 places, front-end engineers need to deal with.

1. UI processing (depending on the permissions the user has, to determine whether some content on the page is displayed)

2. Routing (when a user accesses a URL that it does not have access to), jumps to a page with the wrong hint.

3. HTTP request processing (when we send a data request and if the status returned is 401 or 403, it is usually redirected to a page with the wrong hint)

If you want to use ANGULARJS for authentication on the client , it is recommended to use the service, because the service is a single example, it is convenient to all view,controller,directives, Filters and other service share data, without taking the exposure of global variables, encapsulation also has a certain degree of protection.

A simple example:

Services.factory (' userservice ', [function () { 
var sdo = { 
Islogged:false, 
username: ' 
}; 
return SDO; 
}];

The use of service in Angularjs is done by relying on declarative means, such as:

var controllers = Angular.module (' Myapp.controllers ', []);
/* ... * *
controllers.controller (' Logincontroller ', [' $scope ', ' $http ', ' UserService ', function (scope, $http, User ) {
}]);

In this logincontroller we can define a login function to authenticate user identities to the server:

Scope.login = function () { 
var config = {/* ... */}//Configuration object
$http (config) 
. Success (Function ( Data, status, headers, config) { 
if (data.status) { 
//succefull login 
user.islogged = true; 
User.username = Data.username; 
} 
else { 
user.islogged = false; 
User.username = '; 
} 
}) 
. Error (function (data, status, headers, config) { 
user.islogged = false; 
User.username = '; 
} '; 
}

Then, any controller,view,filter that claims to be dependent on UserService can be userservice.islogged to determine whether the user has been authenticated, or if the anonymous user

Because Angularjs typically uses template to split a page, you use Routeprovider to control access rules for individual pages:

App.config ([' $routeProvider ', function ($routeProvider) { 
$routeProvider. When ('/login ', {templateurl: ' partials /login.html ', controller: ' Loginctrl ', Access: {isfree:true}}); 
$routeProvider. When ('/main ', {templateurl: ' partials/main.html ', controller: ' Mainctrl '}); 
$routeProvider. Otherwise ({redirectto: '/main '}); 
}];

Some pages are accessible without authentication, such as login.html, and some pages are visible to logged-in users, such as main.html, at which point we need to increase the general checkuser logic to determine whether the current user can see these pages:

Directives.directive (' CheckUser ', [' $rootScope ', ' $location ', ' usersrv ', function ($root, $location, usersrv) { 
return { 
link:function (scope, Elem, Attrs, ctrl) { 
$root. $on (' $routeChangeStart ', function (event, Currroute, Prevroute) { 
if (!prevroute.access.isfree &&!usersrv.islogged) { 
//Reload the login route 
} 
/ * 
* IMPORTANT: 
* it ' s not difficult to fool the previous control, 
* So It's really IMPORTANT to repeat the CO Ntrol also in the backend, 
* before sending back to the server reserved information. 
*/ 
}); 
} 
} 
}]);

The directive is registered on the Rootscope and listens to Routechangestart, an AOP concept that weaves a slice to determine user identity rights before route change occurs. Thus, the whole logic of verifying identity in Angularjs is achieved.

The above is a small set to introduce the ANGULARJS authentication method, I hope to help.