Bu makaleyi temel olarak özetleyen bir github deposu oluşturdum: https://medium.com/opinionated-angularjs/techniques-for-authentication-in-angularjs-applications-7bbf0346acec
ng-login Github deposu
Plunker
Mümkün olduğunca iyi açıklamaya çalışacağım, umarım bazılarınıza yardım ederim:
(1) app.js: Uygulama tanımında kimlik doğrulama sabitlerinin oluşturulması
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) Yetkilendirme Hizmeti: Aşağıdaki tüm işlevler, auth.js hizmetinde uygulanır. $ Http hizmeti, kimlik doğrulama prosedürleri için sunucuyla iletişim kurmak için kullanılır. Ayrıca, kullanıcının belirli bir eylemi gerçekleştirmesine izin veriliyorsa, yetkilendirmeyle ilgili işlevleri de içerir.
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) Oturum: Kullanıcı verilerini saklamak için bir tekli. Buradaki uygulama size bağlıdır.
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) Ana denetleyici: Bunu uygulamanızın "ana" işlevi olarak düşünün, tüm denetleyiciler bu denetleyiciden devralır ve bu, uygulamanın kimlik doğrulamasının omurgasını oluşturur.
<body ng-controller="ParentController">
[...]
</body>
(5) Erişim kontrolü: Belirli yollara erişimi reddetmek için 2 adım uygulanmalıdır:
a) Aşağıda görülebileceği gibi ui yönlendiricinin $ stateProvider hizmetinde her yola erişmesine izin verilen rollerin verilerini ekleyin (aynısı ngRoute için de geçerli olabilir).
.config(function ($stateProvider, USER_ROLES) {
$stateProvider.state('dashboard', {
url: '/dashboard',
templateUrl: 'dashboard/index.html',
data: {
authorizedRoles: [USER_ROLES.admin, USER_ROLES.editor]
}
});
})
b) $ rootScope üzerinde. $ on ('$ stateChangeStart'), kullanıcı yetkili değilse durum değişikliğini önlemek için işlevi ekleyin.
$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) Yetkilendirme engelleyicisi: Bu uygulanmıştır, ancak bu kodun kapsamı kontrol edilemez. Her $ http talebinden sonra, bu engelleyici durum kodunu kontrol eder, eğer aşağıdakilerden biri döndürülürse, kullanıcıyı tekrar oturum açmaya zorlamak için bir olay yayınlar.
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 1. makalede belirtildiği gibi, form verilerinin otomatik doldurulmasına ilişkin bir hata, directives.js'de bulunan yönergeyi ekleyerek kolayca önlenebilir.
PS2 Bu kod, farklı rotaların görülmesine izin vermek veya gösterilmesi amaçlanmayan içeriği görüntülemek için kullanıcı tarafından kolayca değiştirilebilir. Mantık sunucu tarafında uygulanmalıdır, bu sadece ng-uygulamanızda işleri düzgün bir şekilde göstermenin bir yoludur.