RBAC权限设计

目录

角色分配权限

操作步骤

1.准备弹框

2.注册事件

3.提供数据方法

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

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

小结

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

目标

思路

将id从父传子

将数据回填到el-tree中

小结

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

原因

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

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

目标

思路

准备api

调用api分配权限-分析

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

小结

权限应用

动态生成左侧菜单

按钮级控制

---

角色分配权限

用户是什么角色(职位),他就具备某些功能

权限管理功能比较多，需要封装组件。

操作步骤

思路: 准备弹框 -> 注册事件 -> 提供数据方法

完成给角色分配权限点的业务

1.准备弹框

首先要创建文件assignPermission.vue  封装子组件

在父组件添加弹层并引入子组件  (引入import   注册:components)

在模板中添加el-dialog组件并引入使用

    title="分配权限(一级为路由页面查看权限-二级为按钮操作权限)" :visible.sync="showDialogAssign">
 

补充数据

return {
  //... 省略其它
  showDialogAssign: false, // 分配权限对话框
}

2.注册事件

交互 - 显示弹层  添加点击事件

    分配权限

在回调中设置showDialogAssign为true

methods:{
  hAssign() {
    this.showDialogAssign = true
  } 
}

交互 - 隐藏弹层

自定义事件 : 子传父

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

在子组件

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

3.提供数据方法

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

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

思路:

1. 准备权限点接口
2. 弹框展示之后：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 中显示数据

    :data="permissionData"
    :props="{ label: 'name' }"
/>

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

目标  : 

对el-tree进一步设置：

1.显示选择框

2.默认全部展开

3.关闭父子关联

属性配置

Element - The world's most popular Vue UI framework

1. show-checkbox 显示选择框
2. default-expand-all 默认展开
3. 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角色分配权限-数据回填

目标

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

思路

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

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

将id从父传子

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

data () {

     return { // 省略其他...

roleId: '  '

  }

}

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

分配权限

对应的回调是:

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

1. 给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只执行一次，后续的显示隐藏操作，都不会导致组件重建，所以：后面打开的内容与第一次是一样的。

解决

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

      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，这里就不需要了）

小结

• el-tree 获取当前选中的节点的keys： getCheckedKeys  (设置：setCheckedKeys)

• 对于el-tree组件，清空当前的选择： this.$refs.tree.setCheckedKeys([])

权限应用

动态生成左侧菜单

按钮级控制