阅读 133

二十四:(重点)角色分配 权限列表的增删改查 给角色分配权限 前端权限应用-页面访问和菜单 静态路由和动态路由解除合并

权限分配和管理方式:根据员工分配相应的角色,相应的角色绑定了对应的权限。

image.png

一 给用户分配角色:

思路:请求角色列表,将角色信息通过for循环渲染到角色弹层上,然后根据用户id,点击对应的角色按钮,添加角色。

image.png 角色信息: image.png 关闭弹层:2个方法

image.png

二 权限列表增删改查:

思路:获取用户权限列表,对权限进行:新增,删除(根据点击的id进行调用接口删除),修改 image.png 使用element的树形结构: 首先调用方法将数据转换为树形,因为树形的数据结构有要求。

image.png image.png

image.png

展示添加按钮判断:只在1级的时候显式 image.png

开启:按钮配置

image.png

image.png

添加权限:(添加权限和编辑权限都写在同一个确定按钮的的方法里) 首先对form表单进行校验,然后调用添加接口

image.png 注意:并且添加权限还分2种情况,

image.png

image.png

编辑权限:调用编辑权限接口,会将权限内容回写到编辑弹层中

image.png

确定按钮:(添加权限和编辑权限都写在同一个确定按钮的的方法里) 也要首先对form表单进行校验,然后调用添加接口

image.png 最后 取消按钮关闭弹层等操作

image.png

判断:展示新增还是编辑弹层的标题:

image.png

三 给角色分配权限:

思路:

1.点击分配权限,弹层出来,发送所有权限请求,获取权限列表数据,将数据转换为树形,渲染到弹层上,根据id,将权拥有的权限数据回写

2点击 确定按钮,发送对应的请求,将权限分配给对应的角色

image.png

复选框:父子不关联 image.png

image.png

将权拥有的权限数据回写:

image.png

image.png image.png

image.png image.png

点击确定:调用el-tree的方法,采用ref绑定之后进行处理,获取到所有被选中的权限数据,点击确定,调用接口,分配权限给角色 image.png image.png image.png

四 前端权限应用-页面访问和菜单

image.png

image.png

image.png

image.png

image.png image.png

image.png

image.png

image.png 之前写好的一个伏笔:return image.png 重点: image.png

五 静态路由和动态路由解除合并

image.png image.png

文章分类
前端
文章标签