Pengesahan
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 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 tiga 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)
Pelaksanaan kawalan identiti akses
Mula-mula, kita perlu mendapatkan semua kebenaran pengguna semasa sebelum Angular bermula, dan kemudian cara yang lebih elegan ialah menyimpan hubungan pemetaan ini melalui perkhidmatan Untuk pemprosesan UI sama ada kandungan pada halaman dipaparkan mengikut kebenaran , kita harus menggunakan Arahan dilaksanakan Selepas memprosesnya, kita juga perlu menambahkan atribut "kebenaran" tambahan padanya apabila menambah laluan dan menetapkan nilai untuk menunjukkan peranan yang mempunyai kebenaran untuk melompat ke URL ini, dan kemudian mendengar. ke acara routeChangeStart melalui Angular Untuk mengesahkan sama ada pengguna semasa mempunyai hak akses ke URL ini Akhirnya, pemintas HTTP diperlukan untuk memantau apabila status dikembalikan oleh permintaan ialah 401 atau 403, dan melompat ke halaman ralat kerja itu kelihatan seperti banyak, tetapi ia sebenarnya agak mudah untuk dikendalikan satu persatu
Kembalikan 401, laksanakan loginCtrl, kembali 403, laksanakan PermissionCtrl.
Dapatkan hubungan pemetaan kebenaran sebelum Angular dijalankan
Projek Angular dimulakan melalui ng-app, tetapi dalam beberapa kes kami mahukan permulaan projek Angular berada di bawah kawalan kami Contohnya, dalam kes ini, saya berharap untuk mendapatkan semua perhubungan pemetaan kebenaran pengguna yang sedang log masuk , dan kemudian Mulakan Apl Sudut Nasib baik, Angular sendiri menyediakan kaedah ini, iaitu angular.bootstrap().
var permissionList;
angular.element(document).ready(function() {
$.get('/api/UserPermission', function(data) {
permissionList = data;
angular.bootstrap(document, ['App']);
});
});
// app.js
var app = angular.module('myApp', []), permissionList;
app.run(function(permissions) {
permissions.setPermissions(permissionList)
});
angular.element(document).ready(function() {
$.get('/api/UserPermission', function(data) {
permissionList = data;
angular.bootstrap(document, ['App']);
});
});
// common_service.js
angular.module('myApp')
.factory('permissions', function ($rootScope) {
var permissionList;
return {
setPermissions: function(permissions) {
permissionList = permissions;
$rootScope.$broadcast('permissionsChanged')
}
};
});
(2) Siarkan acara melalui $broadcast apabila kebenaran berubah.
1. Cara menentukan sama ada komponen UI kelihatan atau tersembunyi berdasarkan kebenaran
Di sini kita perlu menulis arahan sendiri, yang akan memaparkan atau menyembunyikan elemen berdasarkan perhubungan kebenaran
<!-- If the user has edit permission the show a link -->
<div has-permission='Edit'>
<a href="/#/courses/{{ id }}/edit"> {{ name }}</a>
</div>
<!-- If the user doesn't have edit permission then show text only (Note the "!" before "Edit") -->
<div has-permission='!Edit'>
{{ name }}
</div>
angular.module('myApp').directive('hasPermission', function(permissions) {
return {
link: function(scope, element, attrs) {
if(!_.isString(attrs.hasPermission))
throw "hasPermission value must be a string";
var value = attrs.hasPermission.trim();
var notPermissionFlag = value[0] === '!';
if(notPermissionFlag) {
value = value.slice(1).trim();
}
function toggleVisibilityBasedOnPermission() {
var hasPermission = permissions.hasPermission(value);
if(hasPermission && !notPermissionFlag || !hasPermission && notPermissionFlag)
element.show();
else
element.hide();
}
toggleVisibilityBasedOnPermission();
scope.$on('permissionsChanged', toggleVisibilityBasedOnPermission);
}
};
});
angular.module('myApp')
.factory('permissions', function ($rootScope) {
var permissionList;
return {
setPermissions: function(permissions) {
permissionList = permissions;
$rootScope.$broadcast('permissionsChanged')
},
hasPermission: function (permission) {
permission = permission.trim();
return _.some(permissionList, function(item) {
if(_.isString(item.Name))
return item.Name.trim() === permission
});
}
};
});
Idea untuk melaksanakan bahagian ini adalah seperti berikut: Apabila kami menentukan laluan, tambahkan atribut kebenaran Nilai atribut ialah kebenaran untuk mengakses url semasa acara routeChangeStart Setiap kali url berubah Bila , semak sama ada url semasa yang hendak dilompat memenuhi syarat, dan kemudian tentukan sama ada untuk melompat dengan jayanya atau melompat ke halaman gesaan yang salah
app.config(function ($routeProvider) {
$routeProvider
.when('/', {
templateUrl: 'views/viewCourses.html',
controller: 'viewCoursesCtrl'
})
.when('/unauthorized', {
templateUrl: 'views/error.html',
controller: 'ErrorCtrl'
})
.when('/courses/:id/edit', {
templateUrl: 'views/editCourses.html',
controller: 'editCourses',
permission: 'Edit'
});
});
这里依然用到了之前写的hasPermission,这些东西都是高度可复用的.这样就搞定了,在每次view的route跳转前,在父容器的Controller中判断一些它到底有没有跳转的权限即可.
3.HTTP请求处理
这个应该相对来说好处理一点,思想的思路也很简单.因为Angular应用推荐的是RESTful风格的借口,所以对于HTTP协议的使用很清晰.对于请求返回的status code如果是401或者403则表示没有权限,就跳转到对应的错误提示页面即可.
当然我们不可能每个请求都去手动校验转发一次,所以肯定需要一个总的filter.代码如下:
angular.module('myApp')
.config(function($httpProvider) {
$httpProvider.responseInterceptors.push('securityInterceptor');
})
.provider('securityInterceptor', function() {
this.$get = function($location, $q) {
return function(promise) {
return promise.then(null, function(response) {
if(response.status === 403 || response.status === 401) {
$location.path('/unauthorized');
}
return $q.reject(response);
});
};
};
});
写到这里就差不多可以实现在这种前后端分离模式下,前端部分的权限管理和控制了。
表单验证
AngularJS 前端验证指令
var rcSubmitDirective = {
'rcSubmit': function ($parse) {
return {
restrict: "A",
require: [ "rcSubmit", "?form" ],
controller: function() {
this.attempted = false;
var formController = null;
this.setAttempted = function() {
this.attempted = true;
};
this.setFormController = function(controller) {
formController = controller;
};
this.needsAttention = function(fieldModelController) {
if (!formController) return false;
if (fieldModelController) {
return fieldModelController.$invalid && (fieldModelController.$dirty || this.attempted);
} else {
return formController && formController.$invalid && (formController.$dirty || this.attempted);
}
};
},
compile: function() {
return {
pre: function(scope, formElement, attributes, controllers) {
var submitController = controllers[0];
var formController = controllers.length > 1 ? controllers[1] : null;
submitController.setFormController(formController);
scope.rc = scope.rc || {};
scope.rc[attributes.name] = submitController;
},
post: function(scope, formElement, attributes, controllers) {
var submitController = controllers[0];
var formController = controllers.length > 1 ? controllers[1] : null;
var fn = $parse(attributes.rcSubmit);
formElement.bind("submit", function(event) {
submitController.setAttempted();
if (!scope.$$phase) scope.$apply();
if (!formController.$valid) return;
scope.$apply(function() {
fn(scope, {
$event: event
});
});
});
}
};
}
};
}
};
验证通过
<form name="loginForm" novalidate
ng-app="LoginApp" ng-controller="LoginController" rc-submit="login()">
<div class="form-group"
ng-class="{'has-error': rc.loginForm.needsAttention(loginForm.username)}">
<input class="form-control" name="username" type="text"
placeholder="Username" required ng-model="session.username" />
<span class="help-block"
ng-show="rc.form.needsAttention(loginForm.username) && loginForm.username.$error.required">Required</span>
</div>
<div class="form-group"
ng-class="{'has-error': rc.loginForm.needsAttention(loginForm.password)}">
<input class="form-control" name="password" type="password"
placeholder="Password" required ng-model="session.password" />
<span class="help-block"
ng-show="rc.form.needsAttention(loginForm.password) && loginForm.password.$error.required">Required</span>
</div>
<div class="form-group">
<button type="submit" class="btn btn-primary pull-right"
value="Login" title="Login">
<span>Login</span>
</button>
</div>
</form>
样式如下
前端验证通过会调用login()。
