Methods for AngularJS authentication

In the design of permissions, RBAC's role-based access control is quite common. The basic idea is that various permissions on system operation are not directly granted to specific users, but a set of roles is established between the user set and the permission set. Each role corresponds to a set of corresponding permissions.

Once the user is assigned the appropriate role, the user has all operational permissions for that role. The advantage of this is that it is not necessary to assign permissions every time a user is created, as long as the user's corresponding role is assigned, and the role's permission changes are much less than the user's permission changes, which will simplify the user's permission management and reduce the overhead of the system.

In a single page application built by Angular, we need to do one more thing to implement this architecture. On the overall project, there are about three places that the front end engineers need to work on.

1. UI processing (to determine whether some contents on the page are displayed according to the permissions owned by the user)

2. Routing processing (when the user visits an url to which he has no permission, he will jump to a page with an error prompt)

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

If you want to use AngularJS for authentication on the client side, it is recommended to use service because service is singleton and can easily share data among all view, controller, directives, filters and other service without exposing global variables. Encapsulation is also guaranteed.

1 simple example:

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

service is used in AngularJS in the form of 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 an login function to authenticate the user 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, etc. that claims to rely on UserService can use UserService.isLogged to determine whether a user is authenticated or anonymous

Since AngularJS usually uses template to split and recombine 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 ES62en.html, and some pages can only be seen by the logged in user, such as ES64en.html. At this time, we need to add common 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 rootScope and listens to routeChangeStart, also a concept of AOP. Before route change occurs, a section is woven to determine the user's identity permissions. From this, the entire logic of authentication in AngularJS is reached.

The above is the AngularJS authentication method introduced by this site. I hope it will be helpful to you.