Methods of AngularJS authentication_AngularJS

The most common permission design is RBAC role-based access control. The basic idea is that various permissions for system operations are not directly granted to specific users, but a role set is established between the user set and the permission set. . Each role corresponds to a corresponding set of permissions.

Once a user is assigned the appropriate role, the user has all operational permissions for this role. The advantage of this is that you don’t have to assign permissions every time you create a user. You only need to assign the corresponding role to the user. Moreover, the permission changes of roles are much less than the permission changes of users, which will simplify the user permissions. management and reduce system overhead.

In the single-page application built by Angular, we need to do some extra things to implement such an architecture. In terms of the overall project, there are about 3 places that front-end engineers need to deal with.

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

2. Routing processing (when the user accesses a URL that he does not have permission to access, jump to an error 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, it is recommended to use service because service is a singleton and can be easily used in all views, controllers, directives, filters and other services Sharing data without exposing global variables, and encapsulation is also guaranteed.

A simple example:

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

The use of services in AngularJS is done through dependency declarations, 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 the user's 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 = ''; 
}); 
}

Next, as long as any controller, view, filter, etc. that is declared to depend on UserService can use UserService.isLogged to determine whether the user is a verified or anonymous user

Since AngularJS usually uses templates to split and reorganize pages, routeProvider is used to control the access rules of 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' }); 
}]);

Some pages can be accessed without authentication, such as login.html, and some pages can only be seen by logged in users, such as main.html. At this time, we need to add general checkUser logic. 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 an AOP concept. Before the route change occurs, an aspect is woven into it to determine the user's identity and permissions. From this, the entire logic of identity verification in AngularJS is achieved.

The above is the AngularJS authentication method introduced by the editor. I hope it will be helpful to everyone.