Utworzyłem repozytorium github podsumowujące zasadniczo ten artykuł: https://medium.com/opinionated-angularjs/techniques-for-authentication-in-angularjs-applications-7bbf0346acec
ng-login repozytorium Github
Plunker
Postaram się wyjaśnić jak najlepiej, mam nadzieję, że pomogę niektórym z was:
(1) app.js: Tworzenie stałych uwierzytelniania w definicji aplikacji
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) Usługa autoryzacji: Wszystkie poniższe funkcje są zaimplementowane w usłudze auth.js. Usługa $ http służy do komunikacji z serwerem w celu przeprowadzenia procedur uwierzytelniania. Zawiera również funkcje dotyczące autoryzacji, czyli czy użytkownik może wykonać określoną akcję.
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) Sesja: singleton do przechowywania danych użytkownika. Wdrożenie tutaj zależy od Ciebie.
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) Kontroler nadrzędny: Potraktuj to jako „główną” funkcję aplikacji, wszystkie kontrolery dziedziczą po tym kontrolerze i jest to podstawa uwierzytelniania tej aplikacji.
<body ng-controller="ParentController">
[...]
</body>
(5) Kontrola dostępu: Aby odmówić dostępu na niektórych trasach, należy wdrożyć 2 kroki:
a) Dodaj dane o rolach, które mają dostęp do każdej trasy, w usłudze $ stateProvider routera ui, jak widać poniżej (to samo może działać dla ngRoute).
.config(function ($stateProvider, USER_ROLES) {
$stateProvider.state('dashboard', {
url: '/dashboard',
templateUrl: 'dashboard/index.html',
data: {
authorizedRoles: [USER_ROLES.admin, USER_ROLES.editor]
}
});
})
b) W $ rootScope. $ on ('$ stateChangeStart') dodaj funkcję, aby zapobiec zmianie stanu, jeśli użytkownik nie jest autoryzowany.
$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) Przechwytywacz uwierzytelniania: jest zaimplementowany, ale nie można go sprawdzić w zakresie tego kodu. Po każdym żądaniu $ http ten przechwytywacz sprawdza kod stanu, jeśli zostanie zwrócony jeden z poniższych, rozgłasza zdarzenie, aby zmusić użytkownika do ponownego zalogowania.
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 Błąd z autouzupełnianiem danych formularza, jak podano w pierwszym artykule, można łatwo uniknąć, dodając dyrektywę zawartą w directives.js.
PS2 Ten kod może być łatwo modyfikowany przez użytkownika, aby umożliwić oglądanie różnych tras lub wyświetlanie treści, które nie miały być wyświetlane. Logika MUSI być zaimplementowana po stronie serwera, to tylko sposób na poprawne pokazanie rzeczy w Twojej aplikacji ng-app.