Méthodes d'authentification AngularJS_AngularJS

La conception d'autorisations la plus courante est le contrôle d'accès basé sur les rôles RBAC. L'idée de base est que diverses autorisations pour les opérations du système ne sont pas directement accordées à des utilisateurs spécifiques, mais qu'un ensemble de rôles est établi entre l'ensemble d'utilisateurs et l'ensemble d'autorisations. Chaque rôle correspond à un ensemble d'autorisations correspondant.

Une fois qu'un utilisateur se voit attribuer le rôle approprié, il dispose de toutes les autorisations opérationnelles pour ce rôle. L'avantage est que vous n'avez pas besoin d'attribuer des autorisations à chaque fois que vous créez un utilisateur. Il vous suffit d'attribuer le rôle correspondant à l'utilisateur. De plus, les modifications d'autorisation des rôles sont bien inférieures aux modifications d'autorisation des utilisateurs. ce qui simplifiera la gestion des autorisations des utilisateurs et réduira la surcharge du système.

Dans l'application monopage construite par Angular, nous devons faire quelques choses supplémentaires pour implémenter une telle architecture. En termes de projet global, il y a environ 3 endroits que les ingénieurs front-end doivent gérer.

1. Traitement de l'interface utilisateur (déterminer si certains contenus de la page sont affichés en fonction des autorisations dont dispose l'utilisateur)

2. Traitement du routage (lorsque l'utilisateur accède à une URL à laquelle il n'est pas autorisé à accéder, passez à une page d'erreur)

3. Traitement des requêtes HTTP (lorsque nous envoyons une requête de données, si le statut renvoyé est 401 ou 403, elle est généralement redirigée vers une page d'erreur)

Si vous souhaitez utiliser AngularJS pour l'authentification sur le client, il est recommandé d'utiliser le service car le service est un singleton et peut être facilement utilisé dans toutes les vues, contrôleurs, directives, filtres et autres services. données sans exposer les variables globales, et l'encapsulation est également garantie.

Un exemple simple :

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

L'utilisation des services dans AngularJS se fait via des déclarations de dépendances, telles que :

var controllers = angular.module('myApp.controllers', []);
/* ... */
controllers.controller('loginController', ['$scope', '$http', 'UserService', function(scope, $http, User) {
}]);

Dans ce loginController nous pouvons définir une fonction de connexion pour authentifier l'identité de l'utilisateur auprès du serveur :

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

Ensuite, tant que tout contrôleur, vue, filtre, etc. déclaré dépendre de UserService peut utiliser UserService.isLogged pour déterminer si l'utilisateur est un utilisateur vérifié ou anonyme

Comme AngularJS utilise généralement des modèles pour diviser et réorganiser les pages, routeProvider est utilisé pour contrôler les règles d'accès de chaque 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' }); 
}]);

Certaines pages sont accessibles sans authentification, comme login.html, et certaines pages ne peuvent être vues que par les utilisateurs connectés, comme main.html. À ce stade, nous devons ajouter une logique générale checkUser. l'utilisateur actuel peut voir ces 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. 
*/ 
}); 
} 
} 
}]);

Cette directive est enregistrée sur rootScope et écoute routeChangeStart. C'est également un concept AOP avant que le changement de route ne se produise, un aspect y est intégré pour déterminer l'identité et les autorisations de l'utilisateur. À partir de là, toute la logique de vérification d’identité dans AngularJS est réalisée.

Ce qui précède est la méthode d'authentification AngularJS introduite par l'éditeur. J'espère qu'elle sera utile à tout le monde.