RBAC权限设计

<el-dialog
      title="分配权限(一级为路由页面查看权限-二级为按钮操作权限)"
      :visible.sync="showDialogAssign"
    >
      <assign-permission
+        @close="showDialogAssign=false"
      />
    </el-dialog>

在子组件

methods: {
    hCancel() {
    // 通过父组件去关闭弹层
      this.$emit('close')
    }
  }

3.提供数据方法

3.1 角色分配权限-获取权限点数据并显示

在组件assignPermission.vue中，获取当前系统中所有的权限点数据，并以树状结构显示出来，目标效果如下：

思路:

准备权限点接口
弹框展示之后：a:调用api发请求获取数据; b:对数据进行格式转换（数组转树）c:模板绑定（把数据显示到el-tree上）

首先呢,要准备一个空的数组存储权限数据 permissionData: []

a: 发送请求获取数据

引入api 的方法以及之前把数组转树的方法然后再created里调用

created() {
  this.loadPermissionList()
},
  async loadPermissionList() {
    // 发送请求, 获取权限列表
    const ｛ data ｝ = await getPermissionList()
    console.log('权限列表的数据是', data)
    this.permissionData = tranListToTreeData(data)
  }
//tranListToTreeData 数组转树

在 el-tree 中显示数据

<el-tree
:data="permissionData"
:props="{ label: 'name' }"
/>

3.2角色分配权限-设置el-tree的属性

目标 :

对el-tree进一步设置：

1.显示选择框

2.默认全部展开

3.关闭父子关联

属性配置

Element - The world's most popular Vue UI framework

show-checkbox 显示选择框
default-expand-all 默认展开
check-strictly 设置true，可以关闭父子关联

<!-- 权限点数据展示 -->
      <el-tree
        :data="permissionData"
        :props="{ label: 'name' }"
        default-expand-all
        :show-checkbox="true"
        :check-strictly="true"
      />

default-expand-all写法等价于:default-expand-all="true"

小结

业务：一级：表示能否访问某个页面；二级：表示能点击某个按钮

语法：:default-expend-all=“true” <====> default-expend-all

3.3角色分配权限-数据回填

目标

当前用户可能有一些已有的权限，需要我们回显出来

思路

准备api: 获取当前的角色已有的权限点
组装当前参数，调用 api获取数据；
把数据回填显示到tree中

准备api 补充个获取角色详情的api

将id从父传子

在父组件setting.vue中，定义数据项：

data () {

return { // 省略其他...

roleId: ' '

}

}

在点击分配权限时，保存roleId

<el-button size="mini" type="success" @click="hAssign(scope.row.id)">分配权限</el-button>

对应的回调是:

hAssign(id) {
// 记下来id
this.roleId = id
this.showDialogAssign = true
},

在子级件中接收roleId

在assignPerimission.vue中，补充定义props接收roleId值

props: {
  roleId: {
    type: String,
    required: true
  }
}

调用api获取数据

引入前面封装的api

import { 
  assignPerm, 
+ getRoleDetail 
} from '@/api/setting'

在created中调用

created() {
    // 调用接口，获取所有的权限点数据
    this.loadPermissionList()

    // 调用接口，获取当前这个角色已经具备的权限
+   this.loadPermissionByRoleId()
},
async loadPermissionByRoleId() {
    // 根据roleId获取当前这个角色已经具备的权限
    const res = await getRoleDetail(this.roleId)
+   console.log('获取当前角色的已有的权限点数据', res.data.permIds)
  
},

将数据回填到el-tree中

已经获取到了数据了，如何把它填充到el-tree中，让某些个复选框处于选中状态？

答： setCheckedKeys + node-key

官网： Element - The world's most popular Vue UI framework

给tree补充属性node-key

<!-- 权限点数据展示 -->
    <el-tree
      ref="refTree"
      :data="permissionData"
      :props="{ label: 'name' }"
      :default-expand-all="true"
      :show-checkbox="true"
      :check-strictly="true"
+     node-key="id"
    />

2.调用setCheckedKeys

// 获取角色现有的权限
    async loadRoleDetail() {
      const res = await getRoleDetail(this.roleId)
      console.log('获取角色现有的权限', res.data.permIds)

      // 回填
      this.$refs.refTree.setCheckedKeys(res.data.permIds)
    },

小结

业务：在el-tree组件中通过setCheckedKeys方法 + node-key将数据回显到el-tree组件中：处于选中状态

语法：父传子

3.4角色分配权限-数据回填问题：created只执行一次

原因

由于子组件在dialog嵌套，所以，它只会创建一次：created只执行一次，后续的显示隐藏操作，都不会导致组件重建，所以：后面打开的内容与第一次是一样的。

解决

方案一 : 让弹层隐藏时，把子组件销毁

<el-dialog
      title="分配角色"
      :visible.sync="showDialogRole"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
    >
      <子组件
+       v-if="showDialogAssign"
      />
    </el-dialog>

优点：简单；取到的是最新的数据；

缺点：销毁组件，有一定性能问题，

方案二：通过refs来引用子组件，直接调用它的方法来发请求

// 用户点击了权限分配
    hAssign(id) {
      // alert(id)
      // 1. 保存角色编号
      //    它会影响子组件中的props,但是，这个传递的过程是异步的
      this.roleId = id
      // 2. 弹层
      this.showDialogAssign = true
      // 3. 手动调用子组件的loadPermissionByRoleId， 去根据最新的roleId获取权限信息
      this.$nextTick(() => {
        this.$refs.permission.loadPermissionByRoleId()
      })
      }
    }

3.5角色分配权限-保存设置

目标

完成权限分配的功能

思路

准备api, 在点击保存时调用

准备api

文件src\api\settings.js中，补充一个api用来分配权限

调用api分配权限-分析

只需要调用上面定义的api，并传入相关参数即可。

这里的参数有两个：

1.当前的角色id是什么？ 在点击分配权限时，可以从表格中获取，父传子

2.对应的权限列表id的是什么？通过el-tree组件的getCheckedKeys来获取用户选中的id列表

调用api分配权限-功能实现

async hSave() {
  const permIds = this.$refs.tree.getCheckedKeys()
  // console.log('当前选中的节点数组是', permIds)
  const res = await assignPerm({
    id: this.roleId,
    permIds
  })
  console.log('保存角色的权限点的结果是', res)

  // 提示
  this.$message.success('保存角色的权限成功')
  // 关闭弹层
  this.hCancel()
},
hCancel() {
  // 通过父组件去关闭弹层
  this.$emit('close-dialog')

  // 清空当前的选择
  this.$refs.tree.setCheckedKeys([])
}

最后，在弹层关闭时，去清空el-tree中用户选中的数据（如果在子组件上用v-if，这里就不需要了）