05-权限分配尚筹网

分手后的思念是犯贱 2023-09-27 17:58 119阅读 0赞

### **权限控制** ###

权限控制机制的本质就是“用钥匙开锁”。  
![在这里插入图片描述][b55e5cea38bf473fa9e5d55d0cd9ab28.png]  
在实现权限控制之前，这里先完成给Admin分配Role和给Role分配Auth的功能。

### 一、给Admin分配Role ###

#### 目标 ####

通过前端页面操作，将Admin与Role之间的关系保存到数据库

#### 思路 ####

给下面的按钮，添加单击响应函数  
![在这里插入图片描述][7fe2061c1ee94b7498585f956af9f741.png]  
打开如下页面：  
![在这里插入图片描述][cc7a4710c09b4d3d9af81afc8c23553c.png]  
通过左右按钮，可以改变角色分配的情况。

#### 代码 ####

##### 1）、创建关联数据库表 #####

**inner\_admin\_role**

USE project_rowd;
    
    CREATE TABLE inner_admin_role
    ( 
    	id INT NOT NULL AUTO_INCREMENT,
    	admin_id INT,
    	role_id INT,
    	PRIMARY KEY (id) 
    );

该表因为并不是一个实体类的表，只用于表示关联关系，因此不需要进行逆向工程生成。

##### 2）、前后端代码 #####

修改admin-page.jsp中对应按钮的单击响应函数：

跳转到assign/to/page.html页面，附带当前的页码、关键词以及当前按钮对应的admin的id

**创建处理权限分配功能的控制类：AssignHandler**

对应controller中的方法：

@RequestMapping("/assign/to/page.html")
    public String toAssignPage(@RequestParam("adminId") Integer adminId, ModelMap modelMap){
        
    
        // 得到对应当前adminId未被分配的角色（Role）List
        List<Role> UnAssignedRoleList = roleService.queryUnAssignedRoleList(adminId);
    
        // 得到对应当前adminId已被分配的角色（Role）List
        List<Role> AssignedRoleList = roleService.queryAssignedRoleList(adminId);
    
        // 将已选择的、未选择的放入modelMap
        modelMap.addAttribute("UnAssignedRoleList",UnAssignedRoleList);
        modelMap.addAttribute("AssignedRoleList",AssignedRoleList);
    
        // 请求转发到assign-role.jsp
        return "assign-role";
    }

service层方法：

@Override
    public List<Role> queryUnAssignedRoleList(Integer adminId) {
        
        return roleMapper.queryUnAssignedRoleList(adminId);
    }
    
    @Override
    public List<Role> queryAssignedRoleList(Integer adminId) {
        
        return roleMapper.queryAssignedRoleList(adminId);
    }

roleMapper.xml文件中对应的两个SQL语句（通过in 与 not in查询已分配和未分配的）：

<select id="queryUnAssignedRoleList" resultMap="BaseResultMap">
      select id,name
      from t_role
      where
      id not in (select role_id from inner_admin_role where admin_id = #{adminId})
    </select>
    
    
    <select id="queryAssignedRoleList" resultMap="BaseResultMap">
      select id,name
      from t_role
      where
      id in (select role_id from inner_admin_role where admin_id = #{adminId})
    </select>

查询到数据，并存入modelMap中后，跳转到assign-role.jsp页面

在该页面显示查询到的信息：

需要在文件的头部引入jstl，使用forEach遍历的到的List，分别在两个select标签中显示出来；并且将前面页面传给后端的页码、关键词、Admin的id放在隐藏域，一起发送给后端。

<form action="assign/do/assign.html" method="post" role="form" class="form-inline">                        
        
        <input type="hidden" value="${param.adminId}" name="adminId"/>
        <input type="hidden" value="${param.pageNum}" name="pageNum"/>
        <input type="hidden" value="${param.keyword}" name="keyword"/>
        <div class="form-group">
            <label for="exampleInputPassword1">未分配角色列表</label><br>
            <select class="form-control" multiple="" size="10" style="width:100px;overflow-y:auto;">
                <c:forEach items="${requestScope.UnAssignedRoleList}" var="role">
                    <option value="${role.id}">${role.name}</option>
                </c:forEach>
            </select>
        </div>
        <div class="form-group">
            <ul>
                <li id="toRightBtn" class="btn btn-default glyphicon glyphicon-chevron-right"></li>
                <br>
                <li id="toLeftBtn" class="btn btn-default glyphicon glyphicon-chevron-left" style="margin-top:20px;"></li>
            </ul>
        </div>
        <div class="form-group" style="margin-left:40px;">
            <label for="exampleInputPassword1">已分配角色列表</label><br>
            
            <select name="roleIdList" class="form-control" multiple="" size="10" style="width:100px;overflow-y:auto;">
                <c:forEach items="${requestScope.AssignedRoleList}" var="role">
                    <option value="${role.id}">${role.name}</option>
                </c:forEach>
            </select>
        </div>
        <button id="submitBtn" type="submit" style="width:100px;margin-top: 20px;margin-left: 230px;" class="btn btn-sm btn-success btn-block">提交</button>
    </form>

完成显示后，需要：

①实现通过左右按钮，调整选中的Role的位置

②给“提交”按钮设置单击响应函数（为了使点击提交的时候，保证已经选中了“已分配”框的全部内容，能将数据完整地传给后端），最后将将表单内容发送给 **assign/do/assign.html**

后端Controller代码：

@RequestMapping("/assign/do/assign.html")
    public String saveAdminRoleRelationship(
            @RequestParam("adminId") Integer adminId,
            @RequestParam("pageNum") Integer pageNum,
            @RequestParam("keyword") String keyword,
            // 允许roleIdList为空（因为可能已分配的被清空）
            @RequestParam(value = "roleIdList", required = false) List<Integer> roleIdList
    ){
        
    	// 调用service层方法
        adminService.saveAdminRoleRelationship(adminId, roleIdList);
    
        //重定向（减少数据库操作）返回信息页
        return "redirect:/admin/page/page.html?pageNum="+pageNum+"&keyword="+keyword;
    }

Service层方法：

@Override
    public void saveAdminRoleRelationship(Integer adminId, List<Integer> roleIdList) {
        
    
        // 先清除旧的对应inner_admin_role表中对应admin_id的数据
        adminMapper.clearOldRelationship(adminId);
    
        // 如果roleIdList非空，则将该list保存到数据库表中，且admin_id=adminId
        if (roleIdList != null && roleIdList.size() > 0){
        
            adminMapper.saveAdminRoleRelationship(adminId,roleIdList);
        }
        // roleIdList为空，则清空后不做操作
    
    }

AdminMapper.xml中的两个SQL语句：

<delete id="clearOldRelationship">
      delete from inner_admin_role
      where admin_id = #{adminId}
    </delete>
    
    
    <insert id="saveAdminRoleRelationship">
      insert into inner_admin_role(admin_id, role_id) values
      <foreach collection="roleIdList" item="roleId" separator=",">
        (#{adminId},#{roleId})
      </foreach>
    </insert>

这里注意因为插入的语句传入了两个变量，因此需要在mapper接口中用@Param标注出来；下面就是对应的mapper接口的方法：

void saveAdminRoleRelationship(@Param("adminId") Integer adminId, @Param("roleIdList") List<Integer> roleIdList);
    
    void clearOldRelationship(Integer adminId);

至此，已经实现了给Admin分配Role的功能。

### 二、给Role分配Auth ###

#### 目标 ####

将Role与Auth的关联关系保存到数据r库。

#### 思路 ####

通过role-page页面的下面的按钮，打开分配Auth的模态框  
![在这里插入图片描述][10e3d5228e1c4e798aa43d56480696a8.png]  
模态框：  
![在这里插入图片描述][d611f13973a6468ba59a567ad98ad72d.png]

#### 代码 ####

##### 1）、准备数据库表 #####

**t\_auth表：**

use project_rowd;
    
    # 建t_auth表
    CREATE TABLE t_auth (
    	id int(11) NOT NULL AUTO_INCREMENT,
    	name varchar(200) DEFAULT NULL,
    	title varchar(200) DEFAULT NULL,
    	category_id int(11) DEFAULT NULL,
    
    	PRIMARY KEY (id)
    );
    
    # 给t_auth表插入数据
    INSERT INTO t_auth(id,`name`,title,category_id) VALUES(1,'','用户模块',NULL);
    INSERT INTO t_auth(id,`name`,title,category_id) VALUES(2,'user:delete','删除',1);
    INSERT INTO t_auth(id,`name`,title,category_id) VALUES(3,'user:get','查询',1);
    INSERT INTO t_auth(id,`name`,title,category_id) VALUES(4,'','角色模块',NULL);
    INSERT INTO t_auth(id,`name`,title,category_id) VALUES(5,'role:delete','删除',4);
    INSERT INTO t_auth(id,`name`,title,category_id) VALUES(6,'role:get','查询',4);
    INSERT INTO t_auth(id,`name`,title,category_id) VALUES(7,'role:add','新增',4);

逆向生成Auth实体类、Mapper，并创建AuthService接口、等。

关联表inner\_role\_auth：

use project_rowd;
    
    CREATE TABLE inner_role_auth( 
        id INT NOT NULL AUTO_INCREMENT,
        role_id INT,
        auth_id INT,
        PRIMARY KEY (id) 
    );

该表和inner\_admin\_role相似，不需要进行逆向工程

##### 2）、前后端代码 #####

因为role页面的按钮是在my-role.js中动态生成的，修改其中的代码，给checkBtn添加id等于当前的role的id，添加class “checkBtn”：

var checkBtn = "<button type='button' id='"+roleId+"' class='btn btn-success btn-xs checkBtn'><i class=' glyphicon glyphicon-check'></i></button>"

###### 显示树形结构 ######

在role-page.jsp中给对应按钮添加单击响应函数：

// 给分配权限的按钮添加单击响应函数，打开分配模态框
    $("#rolePageTBody").on("click",".checkBtn",function () {
        
    
        // 将当前按钮的id放入全局变量
        window.roleId = this.id;
        // 打开模态框
        $("#assignModal").modal("show");
        // 生成权限信息
        generateAuthTree();
    });

通过zTree生成权限信息generateAuthTree()，且将从后端查到的已经分配的权限回显到模态框中：

这里直接交给zTree自己组装树形结构

要使自动组装需要开启简单JSON功能

// 生成权限信息的树形结构
    function generateAuthTree(){
        
    
        var ajaxReturn = $.ajax({
        
            url: "assign/get/tree.json",
            type: "post",
            async: false,
            dataType: "json"
        });
    
        if (ajaxReturn.status != 200){
        
            layer.msg("请求出错！错误码："+ ajaxReturn.status + "错误信息：" + ajaxReturn.statusText);
            return ;
        }
    
        var resultEntity = ajaxReturn.responseJSON;
    
        if (resultEntity.result == "FAILED"){
        
            layer.msg("操作失败！"+resultEntity.message);
        }
    
        if (resultEntity.result == "SUCCESS"){
        
            var authList = resultEntity.data;
            // 将服务端查询到的list交给zTree自己组装
            var setting = {
        
                data: {
        
                    // 开启简单JSON功能
                    simpleData: {
        
                        enable: true,
                        // 通过pIdKey属性设置父节点的属性名，而不使用默认的pId
                        pIdKey: "categoryId"
                    },
                    key: {
        
                        // 设置在前端显示的节点名是查询到的title，而不是使用默认的name
                        name:"title"
                    },
                },
    
                check: {
        
                    enable:true
                }
            };
    
            // 生成树形结构信息
            $.fn.zTree.init($("#authTreeDemo"), setting, authList);
    
            // 设置节点默认是展开的
            // 1 得到zTreeObj
            var zTreeObj = $.fn.zTree.getZTreeObj("authTreeDemo");
            // 2 设置默认展开
            zTreeObj.expandAll(true);
    
            // ----------回显部分----------
            
            // 回显（勾选）后端查出的匹配的权限
            ajaxReturn = $.ajax({
        
                url: "assign/get/checked/auth/id.json",
                type: "post",
                dataType: "json",
                async: false,
                data:{
        
                    "roleId":window.roleId
                }
            });
    
            if (ajaxReturn.status != 200){
        
                layer.msg("请求出错！错误码："+ ajaxReturn.status + "错误信息：" + ajaxReturn.statusText);
                return ;
            }
    
            resultEntity = ajaxReturn.responseJSON;
    
            if (resultEntity.result == "FAILED"){
        
                layer.msg("操作失败！"+resultEntity.message);
            }
    
            if (resultEntity.result == "SUCCESS"){
        
                var authIdArray = resultEntity.data;
    
                // 遍历得到的autoId的数组
                // 根据authIdArray勾选对应的节点
                for (var i = 0; i < authIdArray.length; i++){
        
                    var authId = authIdArray[i];
    
                    // 通过id得到treeNode
                    var treeNode = zTreeObj.getNodeByParam("id",authId);
    
                    // checked设置为true，表示勾选节点
                    var checked = true;
    
                    // checkTypeFlag设置为false，表示不联动勾选，
                    // 即父节点的子节点未完全勾选时不改变父节点的勾选状态
                    // 否则会出现bug：前端只要选了一个子节点，传到后端后，下次再调用时，发现前端那个子节点的所有兄弟节点也被勾选了，
                    // 因为在子节点勾选时，父节点也被勾选了，之后前端显示时，联动勾选，导致全部子节点被勾选
                    var checkTypeFlag = false;
    
                    // zTreeObj的checkNode方法 执行勾选操作
                    zTreeObj.checkNode(treeNode,checked,checkTypeFlag);
                }
            }
    
        }
    }

Controller层\*\*（显示树形结构部分）\*\*：

@ResponseBody
    @RequestMapping("/assign/get/tree.json")
    public ResultEntity<List<Auth>> getAuthTree(){
        
        List<Auth> authList = authService.queryAuthList();
    
        return ResultEntity.successWithData(authList);
    }

Service层：

@Override
    public List<Auth> queryAuthList() {
        
        // 直接传入一个new的AuthExample，查询全部的Auth
        return authMapper.selectByExample(new AuthExample());
    }

Controller层\*\*（回显已分配权限部分）\*\*：

// 获得被勾选的auth信息
    @ResponseBody
    @RequestMapping("/assign/get/checked/auth/id.json")
    public ResultEntity<List<Integer>> getAuthByRoleId(Integer roleId){
        
        List<Integer> authIdList = authService.getAuthByRoleId(roleId);
        return ResultEntity.successWithData(authIdList);
    }

Service层：

@Override
    public List<Integer> getAuthByRoleId(Integer roleId) {
        
        return authMapper.getAuthByRoleId(roleId);
    }

Mapper接口与authMapper.xml文件的sql：

List<Integer> getAuthByRoleId(Integer roleId);

<select id="getAuthByRoleId" resultType="int">
      select auth_id from inner_role_auth
      where role_id = #{roleId}
    </select>

###### 分配权限功能 ######

给模态框的提交按钮绑定单击响应函数

// 给分配权限的模态框中的提交按钮设置单击响应函数
    $("#assignBtn").click(function () {
        
        // 声明一个数组，用来存放被勾选的auth的id
        var authIdArray = [];
    
        // 拿到zTreeObj
        var zTreeObj = $.fn.zTree.getZTreeObj("authTreeDemo");
    
        // 通过getCheckedNodes方法拿到被选中的option信息
        var authArray = zTreeObj.getCheckedNodes();
    
        for (var i = 0; i < authArray.length; i++) {
        
            // 从被选中的auth中遍历得到每一个auth的id
            var authId = authArray[i].id;
            // 通过push方法将得到的id存入authIdArray
            authIdArray.push(authId);
        }
        var requestBody = {
        
            // 为了后端取值方便，两个数据都用数组格式存放，后端统一用List<Integer>获取
            "roleId":[window.roleId],
            "authIdList":authIdArray
        }
        requestBody = JSON.stringify(requestBody);
    
        $.ajax({
        
            url: "assign/do/save/role/auth/relationship.json",
            type: "post",
            data: requestBody,
            contentType: "application/json;charset=UTF-8",
            dataType: "json",
            success: function (response) {
        
                if (response.result == "SUCCESS"){
        
                    layer.msg("操作成功！");
                }
                if (response.result == "FAILED"){
        
                    layer.msg("操作失败！提示信息："+ response.message);
                }
            },
            error: function (response) {
        
                layer.msg(response.status + "  " + response.statusText);
            }
        });
    
        // 关闭模态框
        $("#assignModal").modal("hide");
    });

Controller层代码：

@ResponseBody
    @RequestMapping("/assign/do/save/role/auth/relationship.json")
    public ResultEntity<String> saveRoleAuthRelationship(
        	// 用一个map接收前端发来的数据
            @RequestBody Map<String,List<Integer>> map ) {
        
    	// 保存更改后的Role与Auth关系
        authService.saveRoleAuthRelationship(map);
        
        return ResultEntity.successWithoutData();
    }

Service层方法：

@Override
    public void saveRoleAuthRelationship(Map<String, List<Integer>> map) {
        
        // 从map获取到roleId、authIdList
        List<Integer> roleIdList = map.get("roleId");
        Integer roleId = roleIdList.get(0);
    
        List<Integer> authIdList = map.get("authIdList");
    
        // 1 清除原有的关系信息
        authMapper.deleteOldRelationshipByRoleId(roleId);
    
    
        // 2 当authIdList有效时，添加前端获取的新的关系信息
        if (authIdList != null && authIdList.size() > 0){
        
            authMapper.insertNewRelationship(roleId,authIdList);
        }
    }

Mapper接口与authMapper.xml文件的sql代码：

void deleteOldRelationshipByRoleId(Integer roleId);
    
    void insertNewRelationship(@Param("roleId") Integer roleId, @Param("authIdList") List<Integer> authIdList);

<delete id="deleteOldRelationshipByRoleId">
      delete from inner_role_auth where
      role_id = #{roleId}
    </delete>
    
    
    <insert id="insertNewRelationship">
      insert into inner_role_auth(role_id, auth_id) values
      <foreach collection="authIdList" item="authId" separator=",">
        (#{roleId},#{authId})
      </foreach>
    </insert>

此时分配权限的功能也实现了。

[b55e5cea38bf473fa9e5d55d0cd9ab28.png]: https://img-blog.csdnimg.cn/b55e5cea38bf473fa9e5d55d0cd9ab28.png
[7fe2061c1ee94b7498585f956af9f741.png]: https://img-blog.csdnimg.cn/7fe2061c1ee94b7498585f956af9f741.png
[cc7a4710c09b4d3d9af81afc8c23553c.png]: https://img-blog.csdnimg.cn/cc7a4710c09b4d3d9af81afc8c23553c.png
[10e3d5228e1c4e798aa43d56480696a8.png]: https://img-blog.csdnimg.cn/10e3d5228e1c4e798aa43d56480696a8.png
[d611f13973a6468ba59a567ad98ad72d.png]: https://img-blog.csdnimg.cn/d611f13973a6468ba59a567ad98ad72d.png