Saya telah membuat repo github yang merangkum artikel ini pada dasarnya: https://medium.com/opinionated-angularjs/techniques-for-authentication-in-angularjs-applications-7bbf0346acec
ng-login repo Github
Plunker
Saya akan mencoba menjelaskan sebaik mungkin, semoga saya membantu beberapa dari Anda di luar sana:
(1) app.js: Pembuatan konstanta autentikasi pada definisi aplikasi
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) Layanan Auth: Semua fungsi berikut diimplementasikan dalam layanan auth.js. Layanan $ http digunakan untuk berkomunikasi dengan server untuk prosedur otentikasi. Juga berisi fungsi tentang otorisasi, yaitu jika pengguna diizinkan untuk melakukan tindakan tertentu.
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) Sesi: Singleton untuk menyimpan data pengguna. Penerapannya di sini bergantung pada Anda.
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) Pengontrol induk: Anggap ini sebagai fungsi "utama" aplikasi Anda, semua pengontrol mewarisi dari pengontrol ini, dan ini adalah tulang punggung autentikasi aplikasi ini.
<body ng-controller="ParentController">
[...]
</body>
(5) Kontrol akses: Untuk menolak akses pada rute tertentu, 2 langkah harus dilaksanakan:
a) Tambahkan data dari peran yang diizinkan untuk mengakses setiap rute, pada layanan $ stateProvider ui router seperti yang dapat dilihat di bawah (hal yang sama dapat bekerja untuk ngRoute).
.config(function ($stateProvider, USER_ROLES) {
$stateProvider.state('dashboard', {
url: '/dashboard',
templateUrl: 'dashboard/index.html',
data: {
authorizedRoles: [USER_ROLES.admin, USER_ROLES.editor]
}
});
})
b) Di $ rootScope. $ on ('$ stateChangeStart') tambahkan fungsi untuk mencegah perubahan status jika pengguna tidak diizinkan.
$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) Pencegat auth: Ini diterapkan, tetapi tidak dapat diperiksa pada cakupan kode ini. Setelah setiap permintaan $ http, interseptor ini memeriksa kode status, jika salah satu dari di bawah ini dikembalikan, maka ia menyiarkan acara untuk memaksa pengguna untuk masuk lagi.
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 Bug dengan form data autofill seperti yang tertera pada artikel pertama dapat dengan mudah dihindari dengan menambahkan direktif yang terdapat pada directives.js.
PS2 Kode ini dapat dengan mudah diubah oleh pengguna, untuk memungkinkan rute yang berbeda untuk dilihat, atau menampilkan konten yang tidak dimaksudkan untuk ditampilkan. Logika HARUS diterapkan di sisi server, ini hanyalah cara untuk menampilkan berbagai hal dengan benar di aplikasi ng Anda.