Java前后端分離之權(quán)限管理示例分析

更新時間：2022年08月25日 11:55:53 作者：青檸果

權(quán)限管理就是管理用戶對于資源的操作。本 CRM 系統(tǒng)的權(quán)限（也稱作資源）是基于角色操作權(quán)限來實現(xiàn)的，即RBAC（Role-Based Access Control，基于角色的訪問控制），就是用戶通過角色與權(quán)限進行關(guān)聯(lián)

1.前端界面

1.1 按鈕

借助elementui中的表格部分

<template slot-scope="scope">
    <el-button @click="permissionClick(scope.row)" type="primary" size="mini">修改權(quán)限222</el-button>
</template>

1.2 對話框+樹形控件

借助elementui中的對話框和樹形結(jié)構(gòu)

 <!--自寫權(quán)限222-->
        <el-dialog
                title="提示"
                :visible.sync="dialogPerVisible"
                width="30%"
                >
            <!--
                :default-expanded-keys="[2, 3]"默認展開項
                :default-checked-keys="[5]"默認選中項
            -->
            <el-tree
                    :data="treeData"
                    show-checkbox
                    node-key="id"
                    :props="defaultProps">
            </el-tree>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogPerVisible = false">取 消</el-button>
                <el-button type="primary" @click="dialogPerVisible = false">確 定</el-button>
            </span>
        </el-dialog>

 data(){
            return{
                //自寫權(quán)限樹遮罩層
                dialogPerVisible:false,
                treeData:[],
                defaultProps: {
                    children: 'children',
                //如果不顯示命名，注意看請求結(jié)果是否為label不是則修改‘label'中的內(nèi)容
                    label: 'label'
                }
            }
        }

methods:{
            //自寫權(quán)限點擊
            permissionClick(row){
              this.dialogPerVisible=true;
              this.$http.get("/system/permission/findPermessionByRoleId/"+row.id).then(result=>{
                  this.treeData=result.data.data.treeData;
              })
            }
        }

2.后端操作

2.1 controller層

//自寫權(quán)限樹
    @GetMapping("findPermessionByRoleId/{roleId}")
    public CommonResult findPermessionByRoleId(@PathVariable String roleId){
        return iPermissionService.findPermessionByRoleId(roleId);
    }

2.2 serviceImpl層

此處使用TODO可以在后面進行查找此業(yè)務(wù)是否完成

 //自寫樹結(jié)構(gòu)的獲取
    @Override
    public CommonResult findPermessionByRoleId(String roleId) {
        //查詢所有的權(quán)限
        QueryWrapper<Permission> wrapper=new QueryWrapper<>();
        //邏輯刪除列考慮在內(nèi) 還有一個狀態(tài)列數(shù)據(jù)庫暫未考慮
        wrapper.eq("is_deleted",0);
        List<Permission> permissionList = permissionMapper.selectList(wrapper);
        //設(shè)置層級關(guān)系
        List<Permission> firstMenus=new ArrayList<>();
        for (Permission first:permissionList) {
            //int
            if(first.getPid().equals("1")){
                firstMenus.add(first);
            }
        }
        //為一級菜單設(shè)置二級菜單
        for (Permission first : firstMenus) {
            //根據(jù)一級菜單id 查詢 該菜單的二級菜單，如果出現(xiàn)不確定有幾級菜單 那么我們可以使用方法的遞歸調(diào)用
            first.setChildren(findChildren(permissionList,first.getId()));
        }
        //TODO根據(jù)角色查詢該角色具有的權(quán)限id
        Map<String,Object> map=new HashMap<>();
        //treeData為前端要接收的值
        map.put("treeData",firstMenus);
        return new CommonResult(2000,"查詢成功",map);
    }
    //方法遞歸
    public void getCheckKey(Permission p,List<String> list){
        if(p.getChildren() == null || p.getChildren().size() == 0){
            list.add(p.getId());
            return;
        }
        List<Permission> children = p.getChildren();
        for (Permission per : children){
            getCheckKey(per, list);
        }
    }

2.3 結(jié)果展示

2.4 查對應(yīng)的權(quán)限菜單（使用中間表）

2.4.1 后端處理(權(quán)限回顯)

使用mybatis-plus生成中間表（rolePermission）

相對于之前添加了根據(jù)角色查詢該角色具有的權(quán)限id內(nèi)容

//調(diào)中間層
    @Autowired
    private IRolePermissionService iRolePermissionService;
    //自寫樹結(jié)構(gòu)的獲取
    @Override
    public CommonResult findPermessionByRoleId(String roleId) {
        //查詢所有的權(quán)限
        QueryWrapper<Permission> wrapper=new QueryWrapper<>();
        //邏輯刪除列考慮在內(nèi) 還有一個狀態(tài)列數(shù)據(jù)庫暫未考慮
        wrapper.eq("is_deleted",0);
        List<Permission> permissionList = permissionMapper.selectList(wrapper);
        //設(shè)置層級關(guān)系
        List<Permission> firstMenus=new ArrayList<>();
        for (Permission first:permissionList) {
            //int
            if(first.getPid().equals("1")){
                firstMenus.add(first);
            }
        }
        //為一級菜單設(shè)置二級菜單
        for (Permission first : firstMenus) {
            //根據(jù)一級菜單id 查詢 該菜單的二級菜單，如果出現(xiàn)不確定有幾級菜單 那么我們可以使用方法的遞歸調(diào)用
            first.setChildren(findChildren(permissionList,first.getId()));
        }
        //根據(jù)角色查詢該角色具有的權(quán)限id
        QueryWrapper<RolePermission> wrapper1=new QueryWrapper<>();
        //根據(jù)角色id獲得權(quán)限
        wrapper1.eq("role_id",roleId);
        List<RolePermission> list = iRolePermissionService.list(wrapper1);
        //由集合轉(zhuǎn)換為查詢permissionId
        List<String> collect = list.stream().map(item -> item.getPermissionId()).distinct().collect(Collectors.toList());
        Map<String,Object> map=new HashMap<>();
        //treeData為前端要接收的值
        map.put("treeData",firstMenus);
        map.put("checkIds",collect);
        return new CommonResult(2000,"查詢成功",map);
    }
    //方法遞歸
    public void getCheckKey(Permission p,List<String> list){
        if(p.getChildren() == null || p.getChildren().size() == 0){
            list.add(p.getId());
            return;
        }
        List<Permission> children = p.getChildren();
        for (Permission per : children){
            getCheckKey(per, list);
        }
    }

2.4.2 前端處理

methods:{
            //自寫權(quán)限點擊
            permissionClick(row){
              this.dialogPerVisible=true;
              this.$http.get("/system/permission/findPermessionByRoleId/"+row.id).then(result=>{
                  this.treeData=result.data.data.treeData;
                  setTimeout(()=>{
                      result.data.data.checkIds.forEach(value=>{
                          this.$refs.rootTree.setChecked(value,true,false);
                      })
                  },100)
              })
            }
}

點擊遮罩層的確定處理

<el-button type="primary" @click="confirmFen()">確 定</el-button>

添加角色id

點擊確定時

 methods:{
            //自寫權(quán)限遮罩層確定
            confirmFen(){
                //1.獲取全選和半選的樹 獲取對象
               var checkedNodes = this.$refs.rootTree.getCheckedNodes(false,true);
               //console.log(checkedNodes)
                var ids=[];
                checkedNodes.forEach(item=>{
                    ids.push(item.id);
                })
                //console.log(ids)
                this.$http.post("/system/rolePermission/"+this.roleId,ids).then(result=>{
                    if(result.data.code===2000){
                        this.dialogPerVisible=false;
                        this.$message.success("分配權(quán)限成功");
                    }
                })
            }
}

console.log打印的結(jié)果（第二處ids）

2.4.3 后端處理（確定修改權(quán)限）

controller層

//自寫權(quán)限樹
    @GetMapping("findPermessionByRoleId/{roleId}")
    public CommonResult findPermessionByRoleId(@PathVariable String roleId){
        return iPermissionService.findPermessionByRoleId(roleId);
    }

serviceImpl層

 @Override
    @Transactional//事務(wù)
    public CommonResult fen(String roleId, List<String> ids) {
        //刪除roleid對應(yīng)的權(quán)限
        QueryWrapper<RolePermission> wrapper=new QueryWrapper<>();
        wrapper.eq("role_id",roleId);
        this.remove(wrapper);
        //添加
        List<RolePermission> collect = ids.stream().map(item -> new RolePermission(null, roleId, item, 0, LocalDateTime.now(), LocalDateTime.now())).collect(Collectors.toList());
        this.saveBatch(collect);
        return new CommonResult(2000,"分配成功",null);
    }

實體類添加