Ich habe ein Github-Repo erstellt, das diesen Artikel im Wesentlichen zusammenfasst: https://medium.com/opinionated-angularjs/techniques-for-authentication-in-angularjs-applications-7bbf0346acec
ng-login Github repo
Plunker
Ich werde versuchen, es so gut wie möglich zu erklären. Ich hoffe, ich helfe einigen von Ihnen da draußen:
(1) app.js: Erstellung von Authentifizierungskonstanten für die App-Definition
var loginApp = angular.module('loginApp', ['ui.router', 'ui.bootstrap'])
/*Constants regarding user login defined here*/
.constant('USER_ROLES', {
all : '*',
admin : 'admin',
editor : 'editor',
guest : 'guest'
}).constant('AUTH_EVENTS', {
loginSuccess : 'auth-login-success',
loginFailed : 'auth-login-failed',
logoutSuccess : 'auth-logout-success',
sessionTimeout : 'auth-session-timeout',
notAuthenticated : 'auth-not-authenticated',
notAuthorized : 'auth-not-authorized'
})
(2) Auth-Dienst: Alle folgenden Funktionen sind im auth.js-Dienst implementiert. Der $ http-Dienst wird verwendet, um mit dem Server für die Authentifizierungsverfahren zu kommunizieren. Enthält auch Funktionen zur Autorisierung, dh wenn der Benutzer eine bestimmte Aktion ausführen darf.
angular.module('loginApp')
.factory('Auth', [ '$http', '$rootScope', '$window', 'Session', 'AUTH_EVENTS',
function($http, $rootScope, $window, Session, AUTH_EVENTS) {
authService.login() = [...]
authService.isAuthenticated() = [...]
authService.isAuthorized() = [...]
authService.logout() = [...]
return authService;
} ]);
(3) Sitzung: Ein Singleton zum Speichern von Benutzerdaten. Die Implementierung hier hängt von Ihnen ab.
angular.module('loginApp').service('Session', function($rootScope, USER_ROLES) {
this.create = function(user) {
this.user = user;
this.userRole = user.userRole;
};
this.destroy = function() {
this.user = null;
this.userRole = null;
};
return this;
});
(4) Übergeordneter Controller: Betrachten Sie dies als die "Haupt" -Funktion Ihrer Anwendung, alle Controller erben von diesem Controller und es ist das Rückgrat der Authentifizierung dieser App.
<body ng-controller="ParentController">
[...]
</body>
(5) Zugangskontrolle: Um den Zugang auf bestimmten Routen zu verweigern, müssen 2 Schritte ausgeführt werden:
a) Fügen Sie im $ stateProvider-Dienst des UI-Routers Daten zu den Rollen hinzu, die für den Zugriff auf jede Route zulässig sind (siehe unten) (dies gilt auch für ngRoute).
.config(function ($stateProvider, USER_ROLES) {
$stateProvider.state('dashboard', {
url: '/dashboard',
templateUrl: 'dashboard/index.html',
data: {
authorizedRoles: [USER_ROLES.admin, USER_ROLES.editor]
}
});
})
b) Fügen Sie unter $ rootScope. $ on ('$ stateChangeStart') die Funktion hinzu, um eine Statusänderung zu verhindern, wenn der Benutzer nicht autorisiert ist.
$rootScope.$on('$stateChangeStart', function (event, next) {
var authorizedRoles = next.data.authorizedRoles;
if (!Auth.isAuthorized(authorizedRoles)) {
event.preventDefault();
if (Auth.isAuthenticated()) {
// user is not allowed
$rootScope.$broadcast(AUTH_EVENTS.notAuthorized);
} else {
// user is not logged in
$rootScope.$broadcast(AUTH_EVENTS.notAuthenticated);
}
}
});
(6) Auth Interceptor: Dies ist implementiert, kann jedoch nicht auf den Umfang dieses Codes überprüft werden. Nach jeder $ http-Anforderung überprüft dieser Interceptor den Statuscode. Wenn einer der folgenden Codes zurückgegeben wird, sendet er ein Ereignis, um den Benutzer zu zwingen, sich erneut anzumelden.
angular.module('loginApp')
.factory('AuthInterceptor', [ '$rootScope', '$q', 'Session', 'AUTH_EVENTS',
function($rootScope, $q, Session, AUTH_EVENTS) {
return {
responseError : function(response) {
$rootScope.$broadcast({
401 : AUTH_EVENTS.notAuthenticated,
403 : AUTH_EVENTS.notAuthorized,
419 : AUTH_EVENTS.sessionTimeout,
440 : AUTH_EVENTS.sessionTimeout
}[response.status], response);
return $q.reject(response);
}
};
} ]);
PS Ein Fehler beim automatischen Ausfüllen der Formulardaten, wie im ersten Artikel angegeben, kann leicht vermieden werden, indem die in directives.js enthaltene Direktive hinzugefügt wird.
PS2 Dieser Code kann vom Benutzer leicht angepasst werden, um verschiedene Routen anzuzeigen oder Inhalte anzuzeigen, die nicht angezeigt werden sollten. Die Logik MUSS serverseitig implementiert werden. Dies ist nur eine Möglichkeit, die Dinge in Ihrer ng-App richtig darzustellen.