权限设计-RBAC的权限设计思想
首先,我们先了解下什么是传统的权限设计
从上面的图中,我们发现,传统的权限设计是对每个人进行单独的权限设置,但这种方式已经不适合目前企业的高效管控权限的发展需求,因为每个人都要单独去设置权限
基于此,RBAC的权限模型就应运而生了,RBAC(Role-Based Access control) ,也就是基于角色的权限分配解决方案,相对于传统方案,RBAC提供了中间层Role(角色),其权限模式如下
RBAC实现了用户和权限点的分离,想对某个用户设置权限,只需要对该用户设置相应的角色即可,而该角色就拥有了对应的权限,这样一来,权限的分配和设计就做到了极简,高效,当想对用户收回权限时,只需要收回角色即可,接下来,我们就在该项目中实施这一设想
给分配员工角色
目标
在员工管理页面,分配角色
新建分配角色窗体
在上一节章节中,员工管理的角色功能,我们并没有实现,此章节我们实现给员工分配角色
从上图中,可以看出,用户和角色是1对多
的关系,即一个用户可以拥有多个角色,比如公司的董事长可以拥有总经理和系统管理员一样的角色
首先,新建分配角色窗体 employees/components/assign-role.vue
<template> <el-dialog title="分配角色" :visible="showRoleDialog"> <!-- el-checkbox-group选中的是 当前用户所拥有的角色 需要绑定 当前用户拥有的角色--> <el-checkbox-group> <!-- 选项 --> </el-checkbox-group> <el-row slot="footer" type="flex" justify="center"> <el-col :span="6"> <el-button type="primary" size="small">确定</el-button> <el-button size="small">取消</el-button> </el-col> </el-row> </el-dialog> </template> <script> export default { props: { showRoleDialog: { type: Boolean, default: false }, // 用户的id 用来查询当前用户的角色信息 userId: { type: String, default: null } } } </script>
获取角色列表和当前用户角色
获取所有角色列表assign-role.vue
<!-- 分配角色 --> <el-checkbox-group v-model="roleIds"> <el-checkbox v-for="item in list" :key="item.id" :label="item.id"> {{ item.name }} </el-checkbox> </el-checkbox-group>
获取角色列表assign-role.vue
import { getRoleList } from '@/api/setting' export default { props: { showRoleDialog: { type: Boolean, default: false }, userId: { type: String, default: null } }, data() { return { list: [], // 角色列表 roleIds: [] } }, created() { this.getRoleList() }, methods: { // 获取所有角色 async getRoleList() { const { rows } = await getRoleList() this.list = rows } } }
获取用户的当前角色assign-role.vue
import { getUserDetailById } from '@/api/user' async getUserDetailById(id) { const { roleIds } = await getUserDetailById(id) this.roleIds = roleIds // 赋值本用户的角色 }
点击角色弹出层employees/index.vue
import assignRole from './components/assign-role.vue' // 导入组件 components: { ..., assignRole // 注册组件 }, data(){ return { userId:null // 用户id } }
<!-- 放置角色分配组件 --> <assign-role ref="assignRole" :show-role-dialog.sync="showRoleDialog" :user-id="userId" />
// 编辑角色 async editRole(id) { this.userId = id // props传值 是异步的 await this.$refs.assignRole.getUserDetailById(id) // 父组件调用子组件方法 this.showRoleDialog = true }
<!-- 按钮调用 --> <el-button type="text" size="small" @click="editRole(row.id)">角色</el-button>
给员工分配角色
分配角色接口 api/employees.js
/** * * 给用户分配角色 * ***/ export function assignRoles(data) { return request({ url: '/sys/user/assignRoles', data, method: 'put' }) }
确定保存 assign-role.vue
import { assignRoles } from '@/api/employees'
async btnOK() { await assignRoles({ id: this.userId, roleIds: this.roleIds }) this.$message.success('设置成功') // 关闭窗体 this.$emit('update:showRoleDialog', false) },
取消或者关闭 assign-role.vue
btnCancel() { this.roleIds = [] // 清空原来的数组 this.$emit('update:showRoleDialog', false) }
提交代码
本节任务
分配员工权限
权限点管理页面开发
目标
: 完成权限点页面的开发和管理
新建权限点管理页面
人已经有了角色, 那么权限是什么
在企业服务中,权限一般分割为 页面访问权限,按钮操作权限,API访问权限
API权限多见于在后端进行拦截,所以我们这一版本只做
页面访问
和按钮操作授权
/
由此,我们可以根据业务需求设计权限管理页面
完成权限页面结构 src/views/permission/index.vue
<template> <div class="dashboard-container"> <div class="app-container"> <!-- 靠右的按钮 --> <page-tools> <template v-slot:after> <el-button type="primary" size="small">添加权限</el-button> </template> </page-tools> <!-- 表格 --> <el-table border> <el-table-column align="center" label="名称" /> <el-table-column align="center" label="标识" /> <el-table-column align="center" label="描述" /> <el-table-column align="center" label="操作"> <template> <el-button type="text">添加</el-button> <el-button type="text">编辑</el-button> <el-button type="text">删除</el-button> </template> </el-table-column> </el-table> </div> </div> </template>
封装权限管理的增删改查请求 src/api/permisson.js
import request from '@/utils/request' // 获取权限 export function getPermissionList(params) { return request({ url: '/sys/permission', params }) } // 新增权限 export function addPermission(data) { return request({ url: '/sys/permission', method: 'post', data }) } // 更新权限 export function updatePermission(data) { return request({ url: `/sys/permission/${data.id}`, method: 'put', data }) } // 删除权限 export function delPermission(id) { return request({ url: `/sys/permission/${id}`, method: 'delete' }) } // 获取权限详情 export function getPermissionDetail(id) { return request({ url: `/sys/permission/${id}` }) }
获取权限数据并转化树形
这里,我们通过树形操作方法,将列表转化成层级数据
<script> import { getPermissionList } from '@/api/permission' import { tranListToTreeData } from '@/utils' export default { data() { return { list: [], formData: { name: '', // 名称 code: '', // 标识 description: '', // 描述 type: '', // 类型 该类型 不需要显示 因为点击添加的时候已经知道类型了 pid: '', // 因为做的是树 需要知道添加到哪个节点下了 enVisible: '0' // 开启 }, rules: { name: [{ required: true, message: '权限名称不能为空', trigger: 'blur' }], code: [{ required: true, message: '权限标识不能为空', trigger: 'blur' }] }, showDialog: false } }, created() { this.getPermissionList() }, computed: { showText() { return this.formData.id ? '编辑' : '新增' } }, methods: { async getPermissionList() { this.list = tranListToTreeData(await getPermissionList(), '0') } } } </script>
绑定表格数据
<el-table :data="list" border="" row-key="id"> <el-table-column label="名称" prop="name" /> <el-table-column label="标识" prop="code" /> <el-table-column label="描述" prop="description" /> <el-table-column label="操作"> <template slot-scope="{ row }"> <el-button v-if="row.type === 1" type="text" @click="addPermission(row.id, 2)">添加</el-button> <el-button type="text" @click="editPermission(row.id)">编辑</el-button> <el-button type="text" @click="delPermission(row.id)"> 删除</el-button> </template> </el-table-column> </el-table>
需要注意的是, 如果需要树表, 需要给el-table配置row-key属性 id
当type为1时为访问权限,type为2时为功能权限
和前面内容一样,我们需要完成 新增权限 / 删除权限 / 编辑权限
新增编辑权限的弹层
新增权限/编辑权限弹层
<!-- 放置一个弹层 用来编辑新增节点 --> <el-dialog :title="`${showText}权限点`" :visible="showDialog" @close="btnCancel"> <!-- 表单 --> <el-form ref="perForm" :model="formData" :rules="rules" label-width="120px"> <el-form-item label="权限名称" prop="name"> <el-input v-model="formData.name" style="width:90%" /> </el-form-item> <el-form-item label="权限标识" prop="code"> <el-input v-model="formData.code" style="width:90%" /> </el-form-item> <el-form-item label="权限描述"> <el-input v-model="formData.description" style="width:90%" /> </el-form-item> <el-form-item label="开启"> <el-switch v-model="formData.enVisible" active-value="1" inactive-value="0" /> </el-form-item> </el-form> <el-row slot="footer" type="flex" justify="center"> <el-col :span="6"> <el-button size="small" type="primary" @click="btnOK">确定</el-button> <el-button size="small" @click="btnCancel">取消</el-button> </el-col> </el-row> </el-dialog>
新增,编辑,删除权限点
<template v-slot:after> <el-button type="primary" size="small" @click="addPermission(0,1)">添加权限</el-button> </template>
新增/删除/编辑逻辑
import { updatePermission, addPermission, getPermissionDetail, delPermission, getPermissionList } from '@/api/permission' methods: { // 删除操作 async delPermission(id) { try { await this.$confirm('确定要删除该数据吗') await delPermission(id) this.getPermissionList() this.$message.success('删除成功') } catch (error) { console.log(error) } }, btnOK() { this.$refs.perForm.validate().then(() => { if (this.formData.id) { return updatePermission(this.formData) } return addPermission(this.formData) }).then(() => { // 提示消息 this.$message.success('新增成功') this.getPermissionList() this.showDialog = false }) }, btnCancel() { this.formData = { name: '', // 名称 code: '', // 标识 description: '', // 描述 type: '', // 类型 该类型 不需要显示 因为点击添加的时候已经知道类型了 pid: '', // 因为做的是树 需要知道添加到哪个节点下了 enVisible: '0' // 开启 } this.$refs.perForm.resetFields() this.showDialog = false }, addPermission(pid, type) { this.formData.pid = pid this.formData.type = type this.showDialog = true }, async editPermission(id) { // 根据获取id获取详情 this.formData = await getPermissionDetail(id) this.showDialog = true } }
提交代码
本节任务
: 权限点管理页面开发
给角色分配权限
目标
: 完成给角色分配权限的业务
新建分配权限弹出层
在公司设置的章节中,我们没有实现分配权限的功能,在这里我们来实现一下
封装分配权限的api src/api/setting.js
// 给角色分配权限 export function assignPerm(data) { return request({ url: '/sys/role/assignPrem', method: 'put', data }) }
给角色分配权限弹出层
<el-dialog title="分配权限" :visible="showPermDialog" @close="btnPermCancel"> <!-- 权限是一颗树 --> <!-- 将数据绑定到组件上 --> <!-- check-strictly 如果为true 那表示父子勾选时 不互相关联 如果为false就互相关联 --> <!-- id作为唯一标识 --> <el-tree ref="permTree" :data="permData" :props="defaultProps" :show-checkbox="true" :check-strictly="true" :default-expand-all="true" :default-checked-keys="selectCheck" node-key="id" /> <!-- 确定 取消 --> <el-row slot="footer" type="flex" justify="center"> <el-col :span="6"> <el-button type="primary" size="small" @click="btnPermOK">确定</el-button> <el-button size="small" @click="btnPermCancel">取消</el-button> </el-col> </el-row> </el-dialog>
定义数据
showPermDialog: false, // 控制分配权限弹层的显示后者隐藏 defaultProps: { label: 'name' }, permData: [], // 专门用来接收权限数据 树形数据 selectCheck: [], // 定义一个数组来接收 已经选中的节点 roleId: null // 用来记录分配角色的id
点击分配权限
<el-button size="small" type="success" @click="assignPerm(row.id)">分配权限</el-button>
给角色分配权限
分配权限/树形数据(setting/index.vue
)
import { ..., assignPerm } from '@/api/setting' import { transListToTreeData } from '@/utils' import { tranListToTreeData } from '@/api/permission' methods: { // 点击分配权限 // 获取权限点数据 在点击的时候调用 获取权限点数据 async assignPerm(id) { this.permData = tranListToTreeData(await getPermissionList(), '0') // 转化list到树形数据 this.roleId = id // 应该去获取 这个id的 权限点 // 有id 就可以 id应该先记录下来 const { permIds } = await getRoleDetail(id) // permIds是当前角色所拥有的权限点数据 this.selectCheck = permIds // 将当前角色所拥有的权限id赋值 this.showPermDialog = true }, async btnPermOK() { // 调用el-tree的方法 // console.log(this.$refs.permTree.getCheckedKeys()) await assignPerm({ permIds: this.$refs.permTree.getCheckedKeys(), id: this.roleId }) this.$message.success('分配权限成功') this.showPermDialog = false }, btnPermCancel() { this.selectCheck = [] // 重置数据 this.showPermDialog = false } }
提交代码
本节任务
给角色分配权限