第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;    }