Rumah  >  Artikel  >  hujung hadapan web  >  Kaedah pengesahan AngularJS_AngularJS

Kaedah pengesahan AngularJS_AngularJS

WBOY
WBOYasal
2016-05-16 15:15:211074semak imbas

Reka bentuk kebenaran yang paling biasa ialah kawalan akses berasaskan peranan RBAC Idea asas ialah pelbagai kebenaran untuk operasi sistem tidak diberikan secara langsung kepada pengguna tertentu, tetapi set peranan ditetapkan antara set pengguna dan set kebenaran . Setiap peranan sepadan dengan set kebenaran yang sepadan.

Setelah pengguna diberikan peranan yang sesuai, pengguna mempunyai semua kebenaran operasi untuk peranan ini. Kelebihan ini ialah anda tidak perlu memberikan kebenaran setiap kali anda membuat pengguna Anda hanya perlu menetapkan peranan yang sepadan kepada pengguna Selain itu, perubahan kebenaran peranan adalah lebih rendah daripada perubahan kebenaran pengguna. yang akan memudahkan pengurusan kebenaran dan mengurangkan overhed sistem.

Dalam aplikasi satu halaman yang dibina oleh Angular, kami perlu melakukan beberapa perkara tambahan untuk melaksanakan seni bina sedemikian Dari segi keseluruhan projek, terdapat kira-kira 3 tempat yang perlu ditangani oleh jurutera hadapan.

1. Pemprosesan UI (tentukan sama ada sesetengah kandungan pada halaman dipaparkan berdasarkan kebenaran yang dimiliki pengguna)


2. Pemprosesan penghalaan (apabila pengguna mengakses URL yang dia tidak mempunyai kebenaran untuk mengakses, lompat ke halaman ralat)


3. Pemprosesan permintaan HTTP (apabila kami menghantar permintaan data, jika status yang dikembalikan ialah 401 atau 403, ia biasanya diubah hala ke halaman ralat)

Jika anda ingin menggunakan AngularJS untuk pengesahan pada klien, adalah disyorkan untuk menggunakan perkhidmatan kerana perkhidmatan adalah tunggal dan boleh digunakan dengan mudah dalam semua paparan, pengawal, arahan, penapis dan Perkongsian perkhidmatan lain data tanpa mendedahkan pembolehubah global, dan enkapsulasi juga dijamin.

Contoh mudah:

services.factory('UserService', [function() { 
var sdo = { 
isLogged: false, 
username: '' 
}; 
return sdo; 
}]);
Penggunaan perkhidmatan dalam AngularJS dilakukan melalui pengisytiharan kebergantungan, seperti:

var controllers = angular.module('myApp.controllers', []);
/* ... */
controllers.controller('loginController', ['$scope', '$http', 'UserService', function(scope, $http, User) {
}]);
Dalam loginController ini kita boleh menentukan fungsi log masuk untuk mengesahkan identiti pengguna ke pelayan:

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 = ''; 
}); 
}
Seterusnya, selagi mana-mana pengawal, paparan, penapis, dsb. yang diisytiharkan bergantung kepada UserService boleh menggunakan UserService.isLogged untuk menentukan sama ada pengguna itu adalah pengguna yang disahkan atau tanpa nama

Memandangkan AngularJS biasanya menggunakan templat untuk memisahkan dan menyusun semula halaman, routeProvider digunakan untuk mengawal peraturan akses setiap halaman:

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' }); 
}]);
Sesetengah halaman boleh diakses tanpa pengesahan, seperti log masuk.html, dan beberapa halaman hanya boleh dilihat oleh pengguna log masuk, seperti main.html Pada masa ini, kita perlu menambah logik pengguna pengguna semasa boleh melihat halaman ini:

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. 
*/ 
}); 
} 
} 
}]);
Arahan ini didaftarkan pada rootScope dan memantau routeChangeStart Ia juga merupakan konsep AOP Sebelum perubahan laluan berlaku, satu aspek dijalin ke dalamnya untuk menentukan identiti dan kebenaran pengguna. Daripada ini, keseluruhan logik pengesahan identiti dalam AngularJS dicapai.

Di atas ialah kaedah pengesahan AngularJS yang diperkenalkan oleh editor saya harap ia akan membantu semua orang.

Kenyataan:
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn