本文已参与[新人创作礼]活动，一起开启掘金创作之路
权限：在系统中是否具备做某个操作的权利
一.权限分为两个级别：
1.页面级：是否有权限访问某个菜单(例如：根据权限显示相应权限的菜单)
2.按钮级：是否有权力操作页面上的某个按钮功能(例如：同一网页根据不同权限导入按钮)
二.权限点管理-静态结构搭建-并批量准备api
1.此时需在表格外部准备一个添加权限按钮，表格内部各行数据准备3个权限操作
2.表格渲染数据，若数据不是树形结构需将其转为树形结构，并使表单支持树形结构
3.业务逻辑
对于权限数据来说，他只有两个级别的设置：
第一层：能不能访问页面
第二层：在页面上，能不能操作某个按钮
4.表单补充业务点--type=1才能显示添加按钮
注1.当type为1时为路由页面访问权限，type为2时为按钮功能操作权限
注2.只有页面级别的节点，才能有添加功能即给该按钮设置了权限控制
5.弹出框设置，并渲染数据及添加表单校验
注1：表单外与表单内的添加按钮均可触发弹出框，同时传递相应的参数
注2：点击表单外添加按钮，添加的是一级路由的访问权限也就是菜单的权限，参数为('', 1)
注3：点击表单内添加按钮，添加的是路由对应页面里面按钮的操作权限，参数为(当前需要添加项的id, 2)
6. 弹出框功能实现
(1)确定按钮校验表单，发请求，关闭弹框，提示，重新发请求获取表格数据
(2)取消按钮，关闭弹框，提示
(3)关闭弹框触发close事件，重置表单及清空校验
7.删除权限点及编辑权限点
(1) 删除权限功能实现(弹出框,确定发请求发提示信息关弹出框，取消关弹出框)
(2) 编辑权限点和添加共用一个弹出框
补充数据项isEdit来区别是否处于编辑状态
添加时isEdit为false，编辑时为true
点击编辑之后，获取详情，显示在表单中，保存用户修改后的结果
保存成功，关闭弹层，重新发请求获取表格数据，提示
添加和编辑公用一个确定事件，将公用的代码放在此方法中，
使用isEdit判断添加或编辑来触发各自不同的代码
弹出框标题title自定义
三.RBAC权限设计思想
1. 背景
为了达成不同的帐号登陆系统后能看到不同的页面，能执行不同的功能的目标，我们有很多种解决方案，RBAC(Role-Based Access control)权限模型 ，也就是基于角色的权限分配解决方案。
其权限模式如下:
2. 三个主体
(1) 用户： 使用系统的人（员工）
权限点：这个系统中有多少个功能（例始：有3个页面，每个页面上各自有3,2,4个不同的操作）
(2) 角色：不同的权限点的集合
(3) 如何给用户添加功能
给用户分配角色，给角色分配权限点
(4) 系统中的权限点可以随意添加吗
不能。必须是程序员已经开发出来的功能
3. 员工分配角色-弹层组件
背景
目前系统中已经有一些角色，我们下面要将这些角色分配给不同的员工，让他们进入系统后，做不同的事情。
用户和角色是1对多的关系：一个用户可以拥有多个角色，这样他就会具体这多个角色的权限了。比如公司的董事长可以拥有财务主管和保安队长的角色： 董事长可以看财务报表，也可以查看监控。
四. 角色管理组件
1. 思路
(1) 把具体的功能给拆分出去（角色的功能比较复杂，拆分组件会减轻工作量）
(2) 通过弹层控制显示
2. 角色管理主页渲染，注册弹出框组件
3. 点击分配角色按钮，记录id，显示弹层
4. 交互效果-关闭弹层
(1) 用户点击了取消按钮
(2) 用户点击了确定按钮，且操作成功
(3) 用户点击了弹层的右上角的X
5. 获取角色列表并用el-checkbox显示
(1) 发请求获取本系统中所有的角色列表并显示在el-checkbox-group中
(2) 对于用来表示多选的el-checkbox-group来说：
v-model的值是数组（表示多选）
它的子元素el-checkbox的label属性决定了选中这一项之后值
(3) 获取用户id，用id去获取当前的角色信息，显示选中角色数据
6. 出现数据无法再次渲染问题解决方案
(1) 每次使用后销毁弹出框组件(v-if)
(2) 在父组件中使用子组件方法(ref)
7.调用接口，将用户修改后的角色保存下来
五. 角色分配权限
1. 为什么要给角色分配权限
用户是什么角色（职位），他就具备某些功能
前面的代码中已经给用户加了角色了，那员工到底能做什么事，还是由角色中携带的具体的功能来定的。
2. 获取数据并渲染角色管理模块
3. 封装弹出框子组件，注册事件用于子组件显示隐藏
4. 获取权限点数据并显示
(1) 准备权限点接口
(2) 弹框展示之后：
1. 调用api发请求获取数据;
2. 对数据进行格式转换（数组转树）
3. 模板绑定（把数据显示到el-tree上）
5. 设置el-tree的属性
显示选择框,默认全部展开,关闭父子关联
注:一级页面查看权限，二级按钮操作权限
6. 当前用户可能有一些已有的权限，需要我们回显出来
给tree补充属性node-key把数据填充到el-tree中，让某些个复选框处于选中状态
7.出现弹出框数据无法重新获取参考上一次添加编辑时处理方案
8.保存
这里的参数有两个：
在点击分配权限时，可以从表格中获取当前的角色id， 父传子；对应的权限列表id：通过el-tree组件的getCheckedKeys来获取用户选中的id列表
el-tree 获取当前选中的节点的keys： getCheckedKeys (设置：setCheckedKeys)
六. 总结
到目前为止，我们实现了RBAC权限设计思想的各个环节，我们给员工分配了角色，给角色又分配了权限点，员工现在已经有了相对应的权限点，接下来我们就可以利用这些权限点做实际的权限控制，在项目里，权限的控制有两个地方：
1. 左侧菜单权限控制（不同的用户进来系统之后，看到的菜单是不同的）
2. 操作按钮权限控制 (页面上的按钮，不同的人也有不同权限)
七. 权限应用--动态生成左侧菜单
分析
登录成功（页面跳转），进入导航守卫：
(1) 获取个人权限信息(使用员工账号登录，查看个人信息接口)
(2) 生成可以访问的动态路由(请套娃至下方链接12步)(⊙o⊙)还有这种操作，学费了
