一、背景介绍
问题： 假如在做一个管理系统，面向老师学生的，学生提交申请，老师负责审核（或者还需要添加其他角色，功能权限都不同）。 现在的问题是，每种角色登录看到的界面应该都是不一样的，那这个页面的区分如何实现呢？，
我的想法是在一套完整的页面判断权限控制显示隐藏。但是，这样的话，不同角色就是用的同一套前端代码， 所以请求都一样了，但是不同角色的请求都不一样（比如学生查询显示自己的，教师查询显示所有的）， 这是否意味着需要通过后台进行用户判断，对同样的请求参数调用不同的方法处理。 另一个方案是，对不同的用户采用独立的页面，这样就会产生大量重复的代码，感觉不可取。 所以想问一下有什么解决方案？
二、知识剖析
权限的设计中比较常见的就是RBAC基于角色的访问控制,基本思想是，对系统操作的各种权限不是直接授予具体的用户，而是在用户集合与权限集合之间建立一个角色集合。每一种角色对应一组相应的权限。 一旦用户被分配了适当的角色后，该用户就拥有此角色的所有操作权限。这样做的好处是，不必在每次创建用户时都进行分配权限的操作，只要分配用户相应的角色即可，而且角色的权限变更比用户的权限变更要少得多，这样将简化用户的权限管理，减少系统的开销。
三、常见问题
那我们前端能做的有什么呢？
四、解决方案
我们来简单讲一下在我们使用的angular框架里边，如何进行用户权限管理
五、编码实战
我们来简单讲一下在我们使用的angular框架里边，如何进行用户权限管理
大概思路
1. UI处理(根据用户拥有的权限,判断页面上的一些内容是否显示)
2. 路由处理(当用户访问一个它没有权限访问的url时,跳转到一个错误提示的页面)
3. HTTP请求处理(当我们发送一个数据请求,如果返回的status是401或者403,则通常重定向到一个错误提示的页面)
首先需要在Angular启动之前就获取到当前用户的所有的permissions,然后比较优雅的方式是通过一个service存放这个映射关系.对于UI处理一个页面上的内容是否根据权限进行显示,我们应该通过一个directive来实现.当处理完这些,我们还需要在添加一个路由时额外为其添加一个"permission"属性,并为其赋值表明拥有哪些权限的角色可以跳转这个URL,然后通过Angular监听routeChangeStart事件来进行当前用户是否拥有此URL访问权限的校验.最后还需要一个HTTP拦截器监控当一个请求返回的status是401或者403时,跳转页面到一个错误提示页面.
在Angular运行之前获取到permission的映射关系
var permissionList;
angular.element(document).ready(function() {
$.get('/api/UserPermission', function(data) {
permissionList = data;
angular.bootstrap(document, ['App']);
});
});
进一步使用上面的代码可以将获取到的映射关系放入一个service作为全局变量来使用.
// 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')
}
};
});
如何确定UI组件的依据权限进行显隐
这里我们需要自己编写一个directive,它会依据权限关系来进行显示或者隐藏元素.
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);
}
};
});
路由上的依权限访问
这一部分的实现的思路是这样: 当我们定义一个路由的时候增加一个permission的属性,属性的值就是有哪些权限才能访问当前url.然后通过routeChangeStart事件一直监听url变化.每次变化url的时候,去校验当前要跳转的url是否符合条件,然后决定是跳转成功还是跳转到错误的提示页面.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'
});
});
父层Controller
app.controller('mainAppCtrl', function($scope, $location, permissions) {
$scope.$on('$routeChangeStart', function(scope, next, current) {
var permission = next.$$route.permission;
if(_.isString(permission) && !permissions.hasPermission(permission))
$location.path('/unauthorized');
});
});
七、参考文献
网友评论