第4.1.2章 WEB系统最佳实践页面实例 角色管理

大多数管理系统的权限设计都是基于基于角色的访问控制（RBAC），下方的效果图中功能涉及创建、编辑、删除角色，为角色授予权限以及为角色添加对应的用户。这里将这些功能放在一个页面，主要目的是为了增加用户体验。



这个页面看似并不复杂，但是内涵的操作逻辑还是挺费脑子。

表格我采用的是bootstrap-table,

树控件我采用的是ztree

1 角色列表初始化时，默认选中第一条记录的权限和用户。

初始化角色表，加载完后触发事件，代码如下。

onLoadSuccess:function(data){
console.log(data);
if ($.isArray(data.rows) && data.total>0){
// 默认选中第一条角色记录
var firstRow = data.rows[0];
curRole = firstRow.id;
// 设置当前选择的角色标识
$('#txtRole').text(firstRow.name);
// 表格选中
mainGrid.bootstrapTable('check', 0);
} else{
// 默认角色为超级管理员
curRole = constant.admin;
}
if (userGrid == undefined){
// 当角色对应权限清单没有渲染时，初始化用户grid
console.log('开始执行 initUserGrid');
initUserGrid();
// 初始化权限树
initPermissionTree();
} else{
// 当角色表刷新时，触发用户清单和权限树的刷新。
refreshUser();
refreshPermission();
}
}

2 选中角色时，显示当前选中角色对应的权限和用户清单

这里用到了bootstrap table的行点击事件

onClickRow:function(item){
curRole = item.id;// 当前选中的角色
// 设置当前角色标识
$('#txtRole').text(item.name);
// 刷新用户清单
refreshUser();
// 刷新角色清单
refreshPermission();
}

3 初始化用户清单做了什么

下面的代码比较常规，没什么可讲的。

/**
* 初始化用户清单
*/
function initUserGrid(){
userGrid = $('#user-grid').bootstrapTable({
sidePagination:'server',cache:false,method:'post',url:ctx+'/ucsUser/selectByRole',queryParams:queryUserParams,contentType: 'application/x-www-form-urlencoded',
uniqueId:'id',sortName:'username',height:375,
pagination:true,pageNumber:1,pageSize:20,pageList:[20,30,50],search:false,
singleSelect:false,striped:true,clickToSelect:true,
columns:[
{checkbox:true},
{field:'username',title:'用户帐号',sortable:true,width:100,align: 'center',valign: 'middle'},
{field:'name',title:'用户实名',sortable:true,width:100,align: 'center',valign: 'middle',hide:true},
{field:'email',title:'email',sortable:true,width:100,align: 'center',valign: 'middle'},
{field:'phone',title:'联系电话',sortable:true,width:100,align: 'center',valign: 'middle'}           ]
});
}
/**
* 查询条件
*/
function queryUserParams(params){
var solidParams = {
page:params.pageNumber,
rows:params.limit,
sort:params.sort,
order:params.order
};
console.log('curRole is: ' + curRole);
// 增加当前角色的查询条件
solidParams = $.extend(solidParams,{roleId:curRole});
return solidParams;
}

4 刷新用户清单是如何做到的

/**
* 刷新用户
*/
function refreshUser(){
userGrid.bootstrapTable('refresh',{url:ctx+'/ucsUser/selectByRole'});
}

5 初始化权限清单做了哪些

从下面可以看出，我这里先加载了所有的权限清单，加载完毕后，在向后台请求哪些是角色所有的。

function initPermissionTree(){
$.fn.zTree.init($('#permissionTree'),{
view:{selectedMulti:false},check:{enable:true,chkStyle: 'checkbox',radioType:'level'},
data:{simpleData:{enable:true,pIdKey:'pid'}},edit:{enable:false},
async:{enable:true,dataType:'json',url:ctx+'/ucsPermission/findList'},
callback:{
onAsyncSuccess:function(){
// 异步加载权限
loadPermissions();
}
}
})
}

下面代码加载已授权的权限，主要是ztree中相关api的使用。

function loadPermissions(){
var permissionTree = $.fn.zTree.getZTreeObj('permissionTree');
$.ajax({
async:false,
type:'get',
url:ctx+'/ucsPermission/selectByRole',
data:{roleId:curRole},
success: function(data){
if(typeof data=='object'){
// 加载权限并选中
$.each(data,function(index,value){
var node = permissionTree.getNodeByParam('id',value.id);
node.checked = true;
permissionTree.updateNode(node);
})
}else{
layer.msg(data);
}
}
});
}

6 那么树又是如何刷新的

function refreshPermission(){
// 获取权限树对象
var permissionTree = $.fn.zTree.getZTreeObj('permissionTree');
// 调用异步加载树节点方法
permissionTree.reAsyncChildNodes(null, "refresh");
}

7 权限是如何保存的

下面的大概的逻辑是，从权限树中获取打上勾的节点，从节点中获取id，然后将id清单提交到后台. js中用到了Ladda，以及layer

function savePermission(){
var permissionTree = $.fn.zTree.getZTreeObj('permissionTree');
var nodes = permissionTree.getCheckedNodes(true);
if ($.isArray(nodes) && nodes.length>0){
var layero = layer.confirm('您确定要保存修改的权限吗？',{title:'系统提示',btn:['确定','取消'],anim:1,icon:3},function(){
layer.close(layero);
var process= Ladda.create($('#btnSetPermission')[0]);
process.start();
var newPermissionList=[];
$.each(nodes,function(index,node){
newPermissionList.push(node.id);
})
$.ajax({
url:ctx+'/ucsRolePermission/savePermissions/'+curRole,
type:'post',
data:JSON.stringify(newPermissionList),
contentType:'application/json;charset=utf-8',
success:function(resp){
if (resp.success){
layer.msg(resp.msg);
} else{
layer.msg(resp.msg);
}
}
}).always(function(){process.stop();});
})
} else{
layer.msg('请选择需要修改的权限',{title:'系统提示',icon:0 ,time:1000});
return false;
}
}

下面的代码是controller的逻辑，从@RequestBody中获取权限清单

@RequestMapping(value="savePermissions/{roleId}", method = RequestMethod.POST)
@ResponseBody
public BaseResponse savePermissions(@PathVariable("roleId") String roleId, @RequestBody List<String> newPermissions){
boolean flag = ucsRolePermissionService.updatePermissions(roleId, newPermissions);
BaseResponse baseResponse = flag  ? new BaseResponse(true, "设置成功") : new BaseResponse(false, "设置失败");
return baseResponse;
}

下方是保存权限的核心业务逻辑，思想是先删后加，简单粗暴。

@Transactional(readOnly = false)
@Override
public boolean updatePermissions(String roleId, List<String> newPermissions) {
// 旧权限
List<UcsPermission> ucsPermissions = ucsPermissionService.selectByRole(roleId);
List<String> oldPermissions = null;
if (!CheckEmptyUtil.isEmpty(ucsPermissions)){
oldPermissions = new ArrayList<String>();
for (UcsPermission uPermission:ucsPermissions){
oldPermissions.add(uPermission.getId());
}
// 删除旧权限
deleteOldPermissions(newPermissions, oldPermissions);
// 插入新权限
return insertNewPermissions(newPermissions, oldPermissions, roleId);
} else{
return insertNewPermissions(newPermissions, oldPermissions, roleId);
}
}

// 删除旧权限
@Transactional(readOnly = false)
private void deleteOldPermissions(List<String> newPermissions,List<String> oldPermissions ){
for (String oldPermission:oldPermissions){
if (!newPermissions.contains(oldPermission)){
removeByPermission(oldPermission);
}
}
}
// 插入新权限
@Transactional(readOnly = false)
private boolean insertNewPermissions(List<String> newPermissions,List<String> oldPermissions, String roleId){
UcsRolePermission ucsRolePermission = null;
boolean flag = false;
if (!CheckEmptyUtil.isEmpty(oldPermissions)){
for (String newPermission:newPermissions){
if (!oldPermissions.contains(newPermission)){
ucsRolePermission = new UcsRolePermission();
ucsRolePermission.setRoleId(roleId);
ucsRolePermission.setPermissionId(newPermission);
flag = insertSelective(ucsRolePermission);
}
}
} else{
for (String newPermission:newPermissions){
ucsRolePermission = new UcsRolePermission();
ucsRolePermission.setRoleId(roleId);
ucsRolePermission.setPermissionId(newPermission);
flag = insertSelective(ucsRolePermission);
}
}
return flag;
}