【前端项目笔记】4 权限管理

权限管理

效果展示：
（1）权限列表
在这里插入图片描述
（2）角色列表

其中的分配权限功能

权限列表功能开发

新功能模块，需要创建新分支
git branch 查看所有分支（*表示当前分支）
git checkout -b rights 创建新分支rights并切换到该分支上
git push -u origin rights 把本地的rights分支推送到云端origin仓库进行保存分支名为rights

先创建对应的组件再创建对应的路由规则
在这里插入图片描述

结果展示

绘制权限列表的基本页面布局

面包屑导航+卡片视图（Table数据表格）
在这里插入图片描述

权限列表的数据获取

在这里插入图片描述

权限列表数据的表格渲染

在这里插入图片描述

角色列表功能开发

用户、角色、权限之间的关系

用户代表电商后台管理系统的每一个账号
权限代表账号所拥有的能力，对一个列表来说分为增删改查这些操作
角色代表不同用户拥有的不同权限
首先把权限分配给不同的角色，再把角色分配给对应的用户（把用户绑定了不同角色，每个角色下拥有不同权限）
在这里插入图片描述

角色列表路由切换

创建组件+创建对应路由规则
在这里插入图片描述

角色列表基础布局+获取角色列表相关数据

基础布局：
面包屑导航+卡片视图区域（添加角色按钮+Table列表）
在这里插入图片描述
获取角色列表数据

表格中角色列表数据的渲染

在这里插入图片描述
增删改查

添加角色：

点击按钮弹出添加角色的对话框并添加表单校验规则
添加角色表单关闭对话框后的重置
添加角色前的表单预校验并实现真正的添加角色功能

修改角色：
4. 添加修改角色表单的内容并撰写对应验证规则
在这里插入图片描述

5. 展示修改角色的对话框

6. 修改表单后关闭对话框需要进行重置操作

7. 预校验及修改角色信息操作

删除角色：
8. 在删除角色之前先弹出提示是否确认删除的对话框（弹框MessageBox）
在这里插入图片描述
9. 判断是否确认删除，确认发送delete请求（通过id删除用户），取消返回提示信息

角色下权限数据的渲染

pre标签，主要用来渲染带有转义字符的（空格符和换行符等）的文本内容（字符串）

通过作用域插槽拿到scope.row，通过scope.row拿到对应的角色信息
通过三层for循环把对应的权限渲染出来，每循环一次往tag里放标签
通过scope.row.children拿到一级权限

在正常形态下，:span默认为24。假如:span为12，那么就是原本列数的一半。
一级权限的美化：

二级权限及三级权限：

将一级权限和二级权限纵向居中

为展开项中每一个权限标签增加一个删除小图标并实现删除权限功能：

为每个标签添加closable属性，可定义标签是否可移除
在这里插入图片描述
首先设置第三权限的删除操作：

**☆优化点：**解决删除权限后关闭展开项无法及时看到删除哪项权限的问题。由于delete请求返回的data, 是当前角色下最新的权限数据，故可用res.children = res.data 为当前角色重新赋值权限，避免当前页面的完整渲染，提升用户体验。
在这里插入图片描述
为第二权限、第一权限增加删除功能：

分配权限功能的实现

弹出对话框，以树形结构获取所有权限数据：
在这里插入图片描述

在对话框中显示树形结构数据：

组件按需导入+全局注册：

树形控件基本展示：

进一步优化树形控件：

在每个节点前添加复选框show-checkbox
选中某节点时不能只是选中文本，要默认选中它的id值
3. 默认展开所有节点

已有权限在树上的默认勾选功能

在点按钮的同时，将当前角色的所有第三权限的id放到一个数组中，通过属性绑定将这个数组交给default-checked-keys
在这里插入图片描述

以递归的方式获取第三权限的id：

在showSetRightDialog函数中调用getLeafKeys函数

解决bug：
关闭分配权限对话框未清空之前的权限数据，导致后面角色的对话框包含之前的数据（每次点开不同角色的分配角色对话框，数据越来越多）
解决方法：每次关闭对话框清空defKeys数组
在这里插入图片描述

具体分配权限的功能

在点击“分配权限”按钮时，先立即把该角色的id保存到data中供后面发送请求使用
点击“确定”按钮时，把所有全选中节点的id和半选中节点的id合并成完整数组
tree组件中获取全节点和半节点的id值以数组形式返回的两个函数

JavaScript中的三个点(…)扩展运算符是一种简写语法，用于取出参数对象的所有可遍历属性，值的集合，展开为函数参数列表或数组。
把这个数组拼接形成字符串（中间以’,'拼接）发送角色授权的请求

提交代码到git仓库中

git branch 查看当前所处分支（当前分支是rights，前面打*号）
git add . 把所有修改过的代码添加到暂存区
git commit -m "完成了权限功能的开发" 把当前所有代码提交到rights分支
git push 把本地right分支提交到云端（不需要-u，因为云端已存在rights分支）
git checkout master 切换到主分支master
git merge rights 把rights分支代码合并到主分支master中
此时本地的master分支已经是最新的，云端中master还是旧的
git push 需要把本地master推送到云端（分支推一次，主线推一次）