权限管理
引言
权限管理模块一共包括两个子组件，一个角色列表组件和权限列表组件，首先说一下角色列表实现的内容。
1.角色列表
角色列表的组织结构如图1所示
图1 角色列表
由图1可以看出，角色列表的顶部是由面包屑导航构成的，内容部分包括在卡片视图区中，由于之前已经将面包屑导航和卡片视图区封装好，这里只需引入即可， 重点主要在卡片视图区的内容，首先引入elementui库中的按钮标签，下面就是表格标签，用来展示请求到的数据。表格第一列是以个展开列，添加type="expand",第二列是索引列，添加type="index"实现。角色名称和角色描述绑定请求到的数据，最后一列的操作引入3个按钮标签方别实现点击对应的按钮实现对应的功能。
1.1 获取列表数据
首先利用get请求获取到对应的列表数据，由于各种请求方法已经封装，需要的时候按需引入即可，引入各种请求代码如下：
//引入方法import {getRequest,postRequest,putRequest,deleteRequest} from '../../../network/
在methods中定义方法，并且在created()中调用，代码如下：
methods中的定义：
//1.获取表格中的角色列表数据getRoleList(){getRequest('/roles').then(res=>{console.log(res);if(res.data.meta.status!==200){return this.$message.error('获取角色列表失败');}//如果获取角色列表成功this.roleList = res.data.data;})}
在created中调用
created(){this.getRoleList();}
由此获取到对应的列表数据。
第一列中的展开栏数据也需要获取，根据图1可知，展开列中的数据分为3级，分别用el-tag进行展示，最右侧在添加一个向右的小图标，这些数据只需要在展开列中定义作用域插槽template，每一级遍历scope.row.children就可以得到每一级的数据。由于第三级是最后一级，所以第三级数据不需要添加向右的小图标。
<el-table-column type="expand"><template slot-scope="scope"></template></el-table-column>
1.2 添加角色
点击添加角色按钮，弹出添加角色信息界面，引入elementui库中的dialog标签，显示如图2所示：
图2 添加角色显示对话框
对话框默认是关闭状态，当点击添加角色按钮之后，对话框显示，可以输入角色名称和角色描述，当点击确定按钮时，提交数据，这里用到的请求是post请求，引入post请求，直接使用，代码如下：
//2. 点击添加角色按钮，输入好角色名称和角色描述后点击确定按钮，确定添加角色addRole(){postRequest('roles',this.addRoleForm).then(res=>{console.log(res);if(res.data.meta.status!==201){return this.$message.error('添加角色失败');}this.$message.success('添加角色成功');this.addRoleVisible=false;//角色添加之后重新刷新角色列表this.getRoleList();})},
通过提交数据，即可实现添加角色的功能。
1.3 编辑
点击编辑按钮，也会弹出一个对话框，如图3所示
图3 编辑对话框
这里注意遍历里面的角色名称需要验证规则，添加rules即可，编辑对话框代码如下 ：
图4 编辑对话框
角色名称校验规则如下：
editRule:{roleName:[{ required: true, message: '请输入角色名称', trigger: 'blur' }]}
点击编辑按钮，查询表单数据
//3.点击编辑，查询角色editRole(id){getRequest('roles/'+id).then(res=>{console.log(res);if(res.data.meta.status!==200){return this.$message.error('获取角色信息失败');}this.$message.success('获取角色信息成功！');this.editVisible=true;this.editRoleId = id;// console.log(this.roleId);})},
点击编辑对话框中的确定按钮之后，就可以提交编辑好之后的数据。
//5.点击编辑弹框中的确定按钮，提交编辑信息saveEdit(id){// console.log(this.roleId);putRequest('roles/'+id,this.editForm).then(res=>{console.log(res);if(res.data.meta.status!==200){return this.$message.error('编辑角色信息失败');}this.$message.success('编辑角色信息成功');this.editVisible=false;this.getRoleList();})},
编辑对话框关闭之后，重置表单。
//4.编辑框关闭，重置表单editClose(){this.$refs.editFormRef.resetFields();},
点击确定按钮提交编辑数据
1.4 删除
点击删除，先弹出对话框判断是否确定删除，在发送delete请求,删除角色
//6.点击删除,删除角色deleteRole(id){//删除信息确认this.$confirm('此操作将永久删除该角色, 是否继续?', '提示', {confirmButtonText: '确定',cancelButtonText: '取消',type: 'warning'}).then(config=>{console.log(config);if(config==='confirm'){//点击确定删除按钮，删除角色deleteRequest('roles/'+id).then(res=>{console.log(res);if(res.data.meta.status!==200){return this.$message.error('删除角色失败');}this.$message.success('删除角色成功');//刷新列表this.getRoleList();})}}).catch(err=>{console.log(err);if(err==='cancel'){return this.$message.info('已取消删除');}})},
1.5 分配权限
点击分配权限，弹出分配权限对话框，如图5所示
图5 分配权限对话框
这里需要elementui库中的el-tree结构，展示对应的数据，首先需要获取分配权限的信息
//7.分配权限setClick(id){this.roleId = id;getRequest('rights/tree').then(res=>{console.log(res);if(res.data.meta.status!==200){return this.$message.error('获取权限信息失败');}this.$message.success('获取权限信息成功');this.setVisible=true;this.rightList=res.data.data;})},
点击确定按钮，实现权限分配，这里需要发送post请求实现角色分配
//8.角色授权,点击确定按钮，进行角色授权allowRight(){const keys = [...this.$refs.treeRef.getCheckedKeys(),...this.$refs.treeRef.getHalfCheckedKeys()];const idStr = keys.join(',');postRequest(`roles/${this.roleId}/rights`,{rids:idStr}).then(res=>{console.log(res);if(res.data.meta.status!==200){this.$message.error('更新失败');}this.$message.success('更新成功');this.setVisible=false;this.getRoleList();})},
角色授权对话框关闭后，清空列表数据
1.6 删除角色指定授权
需要发送delete请求
//10.删除角色指定权限removeRoleTag(roleId,rightId){deleteRequest(`roles/${roleId}/rights/${rightId}`).then(res=>{console.log(res);if(res.data.meta.status!==200){return this.$message.error('删除权限失败');}this.$message.success('删除权限成功');this.getRoleList();})}
2.权限列表
权限列表只需展示获取到的数据即可，没有其他操作,权限列表如图6所示
图6 权限列表
