RBAC权限设计思想（详情）（还没写完）

简介

为了达成不同的账号登录系统后能看到不同的页面，能执行不同的功能的目标，我们有很多种解决方案，RBAC(Role-Based Access control)权限模型 ，也就是基于角色的权限分配解决方案。

三个关键点

•   用户： 就是使用系统的人（员工）
•   权限点：这个系统中有多少个功能（例始：有3个页面，每个页面上的有不同的操作）
•   角色：不同的权限点的集合

 流程：

①在员工管理页新增员工这是三要素中的用户
②为新增的员工分配角色
③在公司设置里为角色分配权限

注：

• 系统中的权限不能随意添加，必须是以开发出来的权限（左侧菜单栏里可实现的页面）
• 用户和角色之间是一对多的关系，一个人身兼数职。 

具体实现： 

1.员工分配角色

        点击分配角色、弹出框，框里含有已有角色列表，点击分配角色时将id传过去，根据id显示当前用户已有的角色。 

在分配角色父组件src/employees/employee.vue

   <el-table-column label="操作" width="280">
      <template slot-scope="scope">
          <el-button type="text" size="small" @click="hAssignRole(scope.row.id)">分配角色</el-button>
      </template>
   </el-table-column>

       // 弹窗
      <el-dialog title="分配角色" :visible.sync="showDialogRole">
        // 子组件
        <AssignRole @close="hClose" :id="curId" ref="assignRole" @on-success="showDialogRole=false"></AssignRole>
      </el-dialog>


   <script>
// 加载子组件
import AssignRole from './assignRole.vue'
 export default {
  components: {
     AssignRole 
    },
      methods: {
     // 点击分配角色
    hAssignRole(id) {
      // 显示弹窗   在data中定义个showDialogRole 
      this.showDialogRole = true
      //  更新id   在data中顶一个curId
      this.curId = id
      this.$nextTick(() => {
        // 3. 找到子组件，调用loadRolesById获取用户角色并回填
        this.$refs.assignRole.loadRolesId()
      })
    }
  }
},

</script>

 分配角色的子组件：src/employees/AssignRole .vue

<template>
  <!-- // 分配角色 -->
  <div>
    <!-- checkList:选中元素的id -->
    <el-checkbox-group v-model="checkList">
 <!-- label决定当前选中的值-->
      <el-checkbox v-for="item in roleIds" :key="item.id" :label="item.id">{{ item.name }}</el-checkbox>
      <!-- <el-checkbox label="选中且禁用" disabled></el-checkbox> -->
    </el-checkbox-group>
    <div style="margin-top: 20px; text-align: right">
      <el-button type="primary" @click="hSubmit">确定</el-button>
      <el-button @click="closeDialog">取消</el-button>
    </div>
  </div>
</template>
<script>
import { getRoles } from '@/api/settings'
import { getUserDetailById } from '@/api/user'
import { updateRole } from '@/api/employees.js'
export default {
// 父传子传来的id值
  props: { id: { type: String, required: true } },
  data() {
    return {
      checkList: [],
      roleIds: [] // 所有的角色
    }
  },
  created() {
    this.loadRoles()
   
  },
  methods: {
    // 点击取消
    closeDialog() {
      this.$emit('close')
    },
    // 获取所有的角色列表，渲染  
    async loadRoles() { 
      const res = await getRoles()
      console.log('获取的所有角色数据', res)
      this.roleIds = res.data.rows
    },
    // 通过id 获得员工的基本信息   通过ref在父组件调用
    async loadRolesId() {
      const res = await getUserDetailById(this.id)
      console.log('角色的列表', res)
      this.checkList = res.data.roleIds
    },
    //
    async hSubmit() {
      const res = await updateRole({ id: this.id, roleIds: this.checkList })
      console.log('保存的角色', res)
      this.$message.success('保存成功')
      // 通知父组件关闭弹窗
      this.$emit('on-success')
    }
  }
}
</script>

2.角色分配权限 

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

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

父组件中(views/setings/setings.vue)：准备弹框 -> 注册事件 -> 提供数据方法

<el-table-column label="操作" width="300">
    <template slot-scope="scope">
        <el-button size="small" type="success" @click="hAssign(scope.row.id)">分配权限</el-button>
    </template>
</el-table-column>
 

// 分配权限的弹窗
      <el-dialog title="分配权限" :visible.sync="showDialogAssign">
        <!-- 子组件 -->
        <AssignPermission
          :roleId="roleId"
          ref="assignPermission"
          @close="showDialogAssign = false"
          @success="showDialogAssign = false"
        ></AssignPermission>
      </el-dialog>


<script>
// 加载子组件
import AssignPermission from './assignPermission'

  export default {
    components: {
      AssignPermission
    },
     methods: {
    // 点击分配权限
    hAssign(id) {
    // 在data中定义，将id传给子组件
      this.roleId = id
    // 在data中定义  showDialogAssign 
      this.showDialogAssign = true
      // 手动调用获取详细的方法
      this.$nextTick(() => {
        this.$refs.assignPermission.loadPermissionByRoleId()
      })
    }
  }
}

</script>

子组件中(settings/AssignPermission.vue): 

<template>
  <div>
    <!-- 1. show-checkbox 显示选择框
         2. default-expand-all 默认展开 写法等价于`:default-expand-all="true"`
         3. check-strictly  设置true，可以关闭父子关联 -->
    <el-tree
      ref="refTree"
      :data="permissionData"
      :props="{ label: 'name' }"
      default-expand-all
      :show-checkbox="true"
      :check-strictly="true"
      node-key="id"
    ></el-tree>
    <!-- 业务：在el-tree组件中通过**setCheckedKeys方法** + **node-key**将数据 回显到el-tree组件中：处于选中状态 -->
    <el-button @click="hSubmit">确认</el-button>
    <el-button @click="hCancel">取消</el-button>
  </div>
</template>

<script>
import { getPermissinoAPI } from '@/api/permission'
import { getRoleDetail, assignPerm } from '@/api/settings'
import { tranListToTreeData } from '@/utils/index'
export default {
  data() {
    return {
      permissionData: [] // 存储权限数据
    }
  },
  props: {
    roleId: {
      type: String,
      required: true
    }
  },
  created() {
    this.loadPermissionList()
    // this.loadPermissionByRoleId() 在父组件中调用
  },
  methods: {
    // 发送请求, 获取权限列表
    async loadPermissionList() {
      // 发送请求, 获取权限列表
      const res = await getPermissinoAPI()
      console.log('权限列表的数据是', res)
      const data = res.data
      // 对数据进行格式转换（数组转树）
      this.permissionData = tranListToTreeData(data)
    },
    //  根据roleId获取当前这个角色已经具备的权限
    async loadPermissionByRoleId() {
      // 根据roleId获取当前这个角色已经具备的权限
      const res = await getRoleDetail(this.roleId)
      console.log('获取当前角色的已有的权限点数据', res.data.permIds)
      // 回填到树上
      this.$refs.refTree.setCheckedKeys(res.data.permIds)
    },
    // 点击确定
    async hSubmit() {
      const permIds = this.$refs.refTree.getCheckedKeys()
      // console.log(permIds)
      // console.log('当前选中的节点数组是', permIds)
      const res = await assignPerm({
        id: this.roleId,
        permIds
      })
      console.log('保存角色的权限点的结果是', res)
      this.$emit('success')
      // 提示
      this.$message.success('保存角色的权限成功')
    },
    // 点击取消
    hCancel() {
      this.$emit('close')
      // 清空当前的选择
      this.$refs.refTree.setCheckedKeys([])
    }
  }
}
</script>

<style></style>