Methoden der AngularJS-Authentifizierung_AngularJS

Das gebräuchlichste Berechtigungsdesign ist die rollenbasierte Zugriffskontrolle von RBAC. Die Grundidee besteht darin, dass verschiedene Berechtigungen für Systemvorgänge nicht direkt bestimmten Benutzern gewährt werden, sondern zwischen dem Benutzersatz und dem Berechtigungssatz ein Rollensatz eingerichtet wird. Jede Rolle entspricht einem entsprechenden Satz von Berechtigungen.

Sobald einem Benutzer die entsprechende Rolle zugewiesen wurde, verfügt der Benutzer über alle Betriebsberechtigungen für diese Rolle. Dies hat den Vorteil, dass Sie nicht jedes Mal, wenn Sie einen Benutzer erstellen, Berechtigungen zuweisen müssen. Darüber hinaus sind die Berechtigungsänderungen der Rolle viel geringer als die Berechtigungsänderungen des Benutzers Benutzer, was die Benutzerberechtigungsverwaltung vereinfacht und den Systemaufwand reduziert.

In der von Angular erstellten Single-Page-Anwendung müssen wir einige zusätzliche Dinge tun, um eine solche Architektur zu implementieren. Im Hinblick auf das Gesamtprojekt gibt es etwa drei Stellen, mit denen sich Front-End-Ingenieure befassen müssen.

1. UI-Verarbeitung (Bestimmen Sie, ob einige Inhalte auf der Seite basierend auf den Berechtigungen des Benutzers angezeigt werden)

2. Routing-Verarbeitung (wenn der Benutzer auf eine URL zugreift, für die er keine Zugriffsberechtigung hat, springen Sie zu einer Fehlerseite)

3. HTTP-Anfrageverarbeitung (wenn wir eine Datenanfrage senden und der zurückgegebene Status 401 oder 403 ist, wird diese normalerweise auf eine Fehlerseite umgeleitet)

Wenn Sie AngularJS zur Authentifizierung auf dem Client verwenden möchten, wird die Verwendung des Dienstes empfohlen, da der Dienst ein Singleton ist und problemlos in allen Ansichten, Controllern, Anweisungen, Filtern und anderen Diensten verwendet werden kann Daten, ohne globale Variablen offenzulegen, und die Kapselung ist ebenfalls gewährleistet.

Ein einfaches Beispiel:

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

Die Nutzung von Diensten in AngularJS erfolgt über Abhängigkeitsdeklarationen, wie zum Beispiel:

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

In diesem loginController können wir eine Anmeldefunktion definieren, um die Identität des Benutzers gegenüber dem Server zu authentifizieren:

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

Als nächstes kann UserService.isLogged verwenden, um zu bestimmen, ob der Benutzer ein verifizierter oder anonymer Benutzer ist, sofern jeder Controller, jede Ansicht, jeder Filter usw., der als abhängig von UserService deklariert ist, ist

Da AngularJS normalerweise Vorlagen zum Teilen und Neuorganisieren von Seiten verwendet, wird routeProvider verwendet, um die Zugriffsregeln jeder Seite zu steuern:

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

Auf einige Seiten kann ohne Authentifizierung zugegriffen werden, und auf einige Seiten kann nur von angemeldeten Benutzern zugegriffen werden, z. B. main.html. Zu diesem Zeitpunkt müssen wir eine allgemeine CheckUser-Logik hinzufügen Der aktuelle Benutzer kann diese Seiten sehen:

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. 
*/ 
}); 
} 
} 
}]);

Diese Direktive wird im RootScope registriert und überwacht routeChangeStart. Es handelt sich ebenfalls um ein AOP-Konzept. Bevor die Routenänderung erfolgt, wird ein Aspekt eingebunden, um die Identität und Berechtigungen des Benutzers zu ermitteln. Daraus wird die gesamte Logik der Identitätsprüfung in AngularJS erreicht.

Das Obige ist die vom Herausgeber eingeführte AngularJS-Authentifizierungsmethode. Ich hoffe, sie wird für alle hilfreich sein.