Vue角色的权限管理

根据服务器端的数据，对角色的权限管理使用for循环进行遍历，然后渲染了样式
使用element-ui实现布局

文章目录

角色权限的样式
角色权限
分配权限
分配角色功能的实现
接口
- 删除角色指定权限的接口
- 所有权限列表接口
- 角色授权接口

角色权限的样式

先获取角色的一级权限、二级权限、三级权限，

然后分别对一级循环、二级权限、三级权限进行循环

下面是一级权限、二级权限、三级权限的数据

角色权限

权限管理：

Rights.vue

<!-- 角色列表数据 --><el-table :data="roleList" border stripe><!-- 展开列 --><el-table-column type="expand"><template slot-scope="scope"><!-- 获取所有权限的数据 --><!-- <pre>{{ scope.row }}</pre> --><!-- el-row 栅格系统，用于编写一、二、三级权限的样式  --><!-- item1 ~ 循环遍历出所有的一级权限 --><!-- i1 ~ 第几个一级权限 --><!-- bdbottom ~ style中的样式 --><!-- bdtop ~ style中的样式 --><!-- :class="['bdbottom', i1 === 0 ? 'bdtop' : '']" 如果是一级权限的第一行就不加上边框了 --><el-row:class="['bdbottom', i1 === 0 ? 'bdtop' : '', 'vcenter']"v-for="(item1, i1) in scope.row.children":key="item1.id"><!-- 渲染一级权限 --><el-col :span="5"><el-tagclosable@close="removeRightById(scope.row, item1.id)">{{ item1.authName }}</el-tag><i class="el-icon-caret-right"></i></el-col><!-- 渲染二级和三级权限 --><el-col :span="19"><!-- 二级权限 --><!-- 通过 for循环 嵌套 渲染二级权限 --><!-- :class="[i2 === 0 ? '' : 'bdtop']" 如果是二级权限的第一行就不加上边框了 --><el-row:class="[i2 === 0 ? '' : 'bdtop', 'vcenter']"v-for="(item2, i2) in item1.children":key="item2.id"><el-col :span="6"><el-tagtype="success"closable@close="removeRightById(scope.row, item2.id)">{{ item2.authName }}</el-tag><i class="el-icon-caret-right"></i></el-col><!-- 三级权限 --><!-- , i3 （v-for 的 循环变量）--><!-- closable 关闭的图标 --><!-- scope.row --  角色 --><!-- item3.id  --  权限id --><el-col :span="18"><el-tagtype="warning"v-for="item3 in item2.children":key="item3.id"closable@close="removeRightById(scope.row, item3.id)">{{ item3.authName }}</el-tag></el-col></el-row></el-col></el-row></template></el-table-column><!-- 索引列 --><el-table-column type="index"></el-table-column><el-table-column label="角色名称" prop="roleName"></el-table-column><el-table-column label="角色描述" prop="roleDesc"></el-table-column><el-table-column label="操作" width="300px"><!--  slot-scope="scope" --><template slot-scope="scope"><!-- 编辑按钮 --><el-buttonsize="mini"type="primary"icon="el-icon-edit"@click="showEditDialog(scope.row.id)">编辑</el-button><!-- 删除按钮 --><el-buttonsize="mini"type="danger"icon="el-icon-delete"@click="removeRoleById(scope.row.id)">删除</el-button><!-- 分配权限按钮 --><el-button size="mini" type="warning" icon="el-icon-setting">分配权限</el-button></template></el-table-column></el-table></el-card>

// 根据Id删除对应的权限async removeRightById(role, rightId) {// 弹框提示用户是否要删除const confirmResult2 = await this.$confirm('此操作将永久删除该文件, 是否继续?','提示',{confirmButtonText: '确定',cancelButtonText: '取消',type: 'warning',}).catch((err) => err)if (confirmResult2 !== 'confirm') {return this.$message.info('已经取消删除权限！')}// console.log('已经删除')const { data: res } = await this.$http.delete(`roles/${role.id}/rights/${rightId}`)if (res.meta.status !== 200) {return this.$message.error('删除权限失败')}// 重新获取数据 （缺点：删除成功了后，会自动关闭）// this.getRolesList()// 另一种获取数据data的办法role.children = res.data}

分配权限

思路：

给角色分配好权限后，将这些权限分别转为字符串形式，不同权限之间用英文逗号分开

当点击“分配权限”的时候，把角色id存到 roleId中
点击“确定”按钮后，将选中的权限转为数组，将得到的数组拼接为字符串

样式：

<!-- 底部的按钮区域 --><span slot="footer" class="dialog-footer"><!-- 点击按钮时 对话框隐藏 --><el-button @click="setRightDialogVisible = false">取 消</el-button><el-button type="primary" @click="allotRights">确 定</el-button></span>

数据：

data() {return {// 所有角色列表数据roleList: [],// 控制分配权限对话框的显示与隐藏setRightDialogVisible: false,// 所有权限的数据rightslist: [],// 树形控件的属性绑定规则treeProps: {label: 'authName',children: 'children',},// 默认选中的节点Id值数组// []里面是Id值defKeys: [],// 当前即将分配权限的角色idroleId: '',// 控制 添加角色对话框 的 显示与隐藏addDialogVisible: false,// 控制 修改角色对话框 的 显示与隐藏editDialogVisible: false,// 查询到的角色信息对象editForm: {},addForm: {roleId: '',roleName: '',roleDesc: '',},}}

逻辑：

// 获取所有角色的列表async getRolesList() {const { data: res } = await this.$http.get('roles')if (res.meta.status !== 200) {return this.$message.error('获取角色列表失败')}this.roleList = res.dataconsole.log(this.roleList)},
// 点击给角色分配权限async allotRights() {const keys = [...this.$refs.treeRef.getCheckedKeys(),...this.$refs.treeRef.getHalfCheckedKeys(),]// 点击“确定”按钮后，将选中的权限 转为 数组，将得到的数组拼接为字符串const idStr = keys.join(',')const { data: res } = await this.$http.post(`roles/${this.roleId}/rights`,{ rids: idStr })if (res.meta.status !== 200) {return this.$message.error('分配权限失败！')}this.$message.success('分配权限成功！')this.getRolesList()this.setRightDialogVisible = false},

分配角色功能的实现

样式：

<!-- 分配权限的对话框 --><el-dialogtitle="分配权限":visible.sync="setRightDialogVisible"width="50%"><!-- 树形控件 --><!-- show-checkbox 复选框 --><!-- node-key="id" 选中某个复选框，选中的是这个复选框中内容的id --><!-- default-expand-all 默认展开所有结点 --><el-tree:data="rightslist":props="treeProps"show-checkboxnode-key="id"default-expand-all></el-tree><!-- 底部的按钮区域 --><span slot="footer" class="dialog-footer"><!-- 点击按钮时 对话框隐藏 --><el-button @click="setRightDialogVisible = false">取 消</el-button><el-button type="primary" @click="setRightDialogVisible = false">确 定</el-button><!-- <el-button type="primary">确 定</el-button> --></span></el-dialog>

<script>
export default {data() {return {// 所有角色列表数据roleList: [],// 控制分配权限对话框的显示与隐藏setRightDialogVisible: false,// 所有权限的数据rightslist: [],// 树形控件的属性绑定规则treeProps: {label: 'authName',children: 'children',},// 控制 添加角色对话框 的 显示与隐藏addDialogVisible: false,// 控制 修改角色对话框 的 显示与隐藏editDialogVisible: false,// 查询到的角色信息对象editForm: {},addForm: {roleId: '',roleName: '',roleDesc: '',},}},created() {this.getRolesList()},methods: {// 获取所有角色的列表async getRolesList() {const { data: res } = await this.$http.get('roles')if (res.meta.status !== 200) {return this.$message.error('获取角色列表失败')}this.roleList = res.dataconsole.log(this.roleList)},// 展示分配权限的对话框async showSetRightDialg() {// 获取所有权限的数据const { data: res } = await this.$http.get('rights/tree')if (res.meta.status !== 200) {return this.message.error('获取权限数据失败')}// 数据获取成功// 把获取到的权限数据保存到 data 中this.rightslist = res.dataconsole.log(this.rightslist)this.setRightDialogVisible = true},},
}
</script>

<!-- 分配权限的对话框 --><!-- @close="setRightDialogClosed" 关闭权限管理对话框的时候，将defKeys数组清空 --><el-dialogtitle="分配权限":visible.sync="setRightDialogVisible"width="50%"@close="setRightDialogClosed"><!-- 树形控件 --><!-- show-checkbox 复选框 --><!-- node-key="id" 选中某个复选框，选中的是这个复选框中内容的id --><!-- default-expand-all 默认展开所有结点 --><!-- :default-checked-keys="defKeys" 默认勾选 --><el-tree:data="rightslist":props="treeProps"show-checkboxnode-key="id"default-expand-all:default-checked-keys="defKeys"></el-tree>

<script>
export default {data() {return {// 所有角色列表数据roleList: [],// 控制分配权限对话框的显示与隐藏setRightDialogVisible: false,// 所有权限的数据rightslist: [],// 树形控件的属性绑定规则treeProps: {label: 'authName',children: 'children',},// 默认选中的节点Id值数组// []里面是Id值defKeys: [],// 控制 添加角色对话框 的 显示与隐藏addDialogVisible: false,// 控制 修改角色对话框 的 显示与隐藏editDialogVisible: false,// 查询到的角色信息对象editForm: {},addForm: {roleId: '',roleName: '',roleDesc: '',},}},created() {this.getRolesList()},methods: {// 获取所有角色的列表async getRolesList() {const { data: res } = await this.$http.get('roles')if (res.meta.status !== 200) {return this.$message.error('获取角色列表失败')}this.roleList = res.dataconsole.log(this.roleList)},// 展示分配权限的对话框async showSetRightDialg(role) {// 获取所有权限的数据const { data: res } = await this.$http.get('rights/tree')if (res.meta.status !== 200) {return this.message.error('获取权限数据失败')}// 数据获取成功// 把获取到的权限数据保存到 data 中this.rightslist = res.dataconsole.log(this.rightslist)// 递归获取三级权限的idthis.getLeafKeys(role, this.defKeys)// 显示权限管理的对话框this.setRightDialogVisible = true},// 通过递归的形式，获取到角色下所有三级权限的id,并保存到 defKeys 数组中getLeafKeys(node, arr) {// 如果当前 node 节点不包含children属性，则是三级节点if (!node.children) {return arr.push(node.id)}node.children.forEach((item) => {this.getLeafKeys(item, arr)})},// 监听分配权限对话框的关闭事件setRightDialogClosed() {this.defKeys = []}}
}

接口

删除角色指定权限的接口

请求路径：roles/:roleId/rights/:rightId
请求方法：delete

请求参数

参数名	参数说明	备注
:roleId	角色 ID	不能为空`携带在url中`
:rightId	权限 ID	不能为空`携带在url中`

响应数据说明
- 返回的data, 是当前角色下最新的权限数据

响应数据

{"data": [{"id": 101,"authName": "商品管理","path": null,"children": [{"id": 104,"authName": "商品列表","path": null,"children": [{"id": 105,"authName": "添加商品","path": null},{"id": 116,"authName": "修改","path": null}]}]}],"meta": {"msg": "取消权限成功","status": 200}
}

所有权限列表接口

请求路径：rights/:type
请求方法：get
请求参数

参数名	参数说明	备注
type	类型	值 list 或 tree , list 列表显示权限, tree 树状显示权限,`参数是url参数:type`

响应参数

参数名	参数说明	备注
id	权限 ID
authName	权限说明
level	权限层级
pid	权限父 ID
path	对应访问路径

响应数据 type=list

  {"data": [{"id": 101,"authName": "商品管理","level": "0","pid": 0,"path": null},{"id": 102,"authName": "订单管理","level": "0","pid": 0,"path": null}],"meta": {"msg": "获取权限列表成功","status": 200}
}

type=tree

  {data: [{id: 101,authName: '商品管理',path: null,pid: 0,children: [{id: 104,authName: '商品列表',path: null,pid: 101,children: [{id: 105,authName: '添加商品',path: null,pid: '104,101'}]}]}],meta: {msg: '获取权限列表成功',status: 200}}

角色授权接口

请求路径：roles/:roleId/rights
请求方法：post
请求参数：通过 请求体 发送给后端

参数名	参数说明	备注
:roleId	角色 ID	不能为空`携带在url中`
rids	权限 ID 列表（字符串）	以 `,` 分割的权限 ID 列表（获取所有被选中、叶子节点的key和半选中节点的key, 包括 1，2，3级节点）

响应数据

{"data": null,"meta": {"msg": "更新成功","status": 200}
}

Vue角色的权限管理相关推荐

Spring Security基于角色的权限管理
1.Spring Security 1.1核心领域概念认证(Authentication):认证是建立主体(principal)的过程. 主体通常是指在应用程序中执行操作的用户.设备或其他系统授权 ...
[vue] vue要做权限管理该怎么做？如果控制到按钮级别的权限怎么做？
[vue] vue要做权限管理该怎么做?如果控制到按钮级别的权限怎么做? 可以通过指令去做 Vue.directive('hasPermission', { bind(el, binding, vno ...
从零开始——基于角色的权限管理01（补充）
此博文较为详细的介绍从零开始--基于角色的权限管理01文中的两个部分的流程(解释代码). 1) index.jsp中提交跳转action action的login,获取jsp页面传过来的用户名密码和验 ...
RBAC-基于角色的权限管理
RBAC-基于角色的权限管理 RBAC权限管理 RBAC(Role-Based Access Control,基于角色的访问控制),就是用户通过角色与权限进行关联.简单地说,一个用户拥有若干角色,每一 ...
VUE后台管理系统权限管理
VUE后台管理系统权限管理(面试路由守卫) 1.背景后台管理系统中总会遇到权限分配的问题:这也是一道vue的很经典的面试问题 2.解决思路权限管理无非前端或者后台解决先说一下前端解决的思路:在设 ...
Shiro角色和权限管理
Shiro角色和权限管理在resources下创建shiro.ini文件,用于存储数据,也可以将数据存于数据库,这里我采用shiro.ini文件,内容如下: [users] zhangsan=z3, ...
Jenkins 用户角色及权限管理
Jenkins 用户.角色及权限管理官方文档:https://jenkins.io/zh/doc/ 1.插件管理首先,登录以管理员身份登录Jenkins 然后,在插件管理模块中,检查Role-ba ...
Jenkins 中基于角色的权限管理
Jenkins 中基于角色的权限管理原文地址: Jenkins 中基于角色的权限管理 | 超级小豆丁 (mydlq.club) 系统环境: Jenkins 版本:2.213 一.简介 Jenkins ...
oracle中角色和用户权限,Oracle用户、角色、权限管理
用户在会话的权利上,应该有其他操作的权利:Oracle的用户和口令不区分大小写,真是让人大跌眼镜:Oralce中,所有用户必须明确被 create or replace type address as ...

Vue角色的权限管理

文章目录

角色权限的样式

角色权限

分配权限

分配角色功能的实现

接口

删除角色指定权限的接口

所有权限列表接口

角色授权接口

Vue角色的权限管理相关推荐

最新文章

热门文章

Vue角色的权限管理

文章目录

角色权限的样式

角色权限

分配权限

分配角色功能的实现

接口

删除角色指定权限的接口

所有权限列表接口

角色授权 接口

Vue角色的权限管理相关推荐

最新文章

热门文章

角色授权接口