简介
为了达成不同的账号登录系统后能看到不同的页面，能执行不同的功能的目标，我们有很多种解决方案，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>
?
?
?