权限设计-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
}
}
提交代码
本节任务 给角色分配权限