AngularJS authentication method, angularjs Authentication

AngularJS authentication method, angularjs Authentication

Role-Based Access Control (RBAC) is a common design of permissions. The basic idea is that permissions for system operations are not directly granted to specific users, instead, a role set is created between the user set and the permission set. Each role corresponds to a group of permissions.

Once a user is assigned an appropriate role, the user has all operation permissions for this role. The advantage of this is that you do not have to assign permissions each time you create a user. You only need to assign the corresponding role to the user, and the permission change of the role is much less than that of the user, this will simplify user permission management and reduce system overhead.

In a single page application built by Angular, we need to do more to implement such an architecture. In terms of the overall project, there are about three places where front-end engineers need to deal with it.

1. UI processing (based on the user's permissions, determine whether some content on the page is displayed)

2. Route processing (when a user accesses a url that he or she does not have the permission to access, he or she jumps to an error prompt page)

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

If you want to use AngularJS for authentication on the client side, we recommend that you use service for authentication.Because the service is a Singleton, you can easily share data in all views, controllers, directives, filters, and other services without exposing global variables, encapsulation is also guaranteed.

A simple example:

services.factory('UserService', [function() { var sdo = { isLogged: false, username: '' }; return sdo; }]);

In AngularJS, services are implemented through dependency declaration, for example:

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 verify the user identity 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, and filter dependent on UserService can be declared using UserService. isLogged to determine whether the user has been verified or anonymous.

AngularJS usually uses template to split and reorganize pages. In this case, routeProvider is used to control the access rules for each page:

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' }); }]);

Then, we need to add 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 control also in the backend, * before sending back from the server reserved information. */ }); } } }]);

This directive is registered on the rootScope and listens to routeChangeStart. It is also a kind of AOP concept. Before the route change occurs, a plane is woven to determine the user's identity and permissions. Thus, the entire logic of Identity Authentication in AngularJS is achieved.

The above is a small series of AngularJS authentication methods, I hope to help you.

Articles you may be interested in:

• How to Use AngularJS framework to implement control verification with a line of JS Code
• AngularJS implements Form Verification
• Detailed explanation of Form Verification programming in AngularJS
• AngularJS implements manual form verification and Automatic Form Verification
• Details about how AngularJS implements Form Verification
• AngularJS uses ngMessages for Form Verification
• AngularJS uses angular-formly for Form Verification