失眠网 > Vue项目实战之人力资源平台系统（十一）权限管理模块（上）

Vue项目实战之人力资源平台系统（十一）权限管理模块（上）

时间：2023-03-31 12:19:04

前言

前言一、权限管理的设计思想二、给员工分配角色2.1 分配角色弹窗效果图2.1 新建分配角色对话框组件2.2 获取角色列表2.3 获取当前用户的角色信息2.4 点击确定按钮给用户分配角色三、权限管理页面3.1 权限管理页面效果图3.2 权限管理页面的基础布局3.3 封装权限管理相关请求3.4 获取权限数据3.5 新增、编辑和删除权限四、给角色分配权限4.1 分配权限效果图4.2 封装分配权限的请求4.3 新建分配权限弹窗总结

一、权限管理的设计思想

我们项目使用的是RBAC的权限模型，RBAC(Role-Based Access control) ，也就是基于角色的权限分配解决方案，相对于传统方案，RBAC提供了中间层Role（角色），其权限模式如下：

RBAC实现了用户和权限点的分离，想对某个用户设置权限，只需要对该用户设置相应的角色即可，而该角色就拥有了对应的权限，这样一来，权限的分配和设计就做到了极简，高效，当想对用户收回权限时，只需要收回角色即可

二、给员工分配角色

2.1 分配角色弹窗效果图

2.1 新建分配角色对话框组件

用户和角色是1对多的关系，即一个用户可以拥有多个角色

在src/views/employees/components/目录下新建assign-role.vue组件：

<template><el-dialog title="分配角色" :visible="showRoleDialog"><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}}}</script>

2.2 获取角色列表

在src/views/employees/components/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>import {getRoleList } from '@/api/setting'export default {props: {showRoleDialog: {type: Boolean,default: false},userId: {type: String,default: null}},data() {return {list: [], // 角色列表}},created() {this.getRoleList()},methods: {// 获取所有角色async getRoleList() {const {rows } = await getRoleList()this.list = rows}}}

2.3 获取当前用户的角色信息

首先，在src/views/employees/components/assign-role.vue中定义获取角色信息的方法：

import {getUserDetailById } from '@/api/user'async getUserDetailById(id) {const {roleIds } = await getUserDetailById(id)this.roleIds = roleIds // 赋值本用户的角色}

然后，在src/views/employees/index.vue中调用子组件方法：

<el-button type="text" size="small" @click="editRole(row.id)">角色</el-button><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},

2.4 点击确定按钮给用户分配角色

首先，在src/api/employees.js中封装分配角色的请求：

/** ** 给用户分配角色* ***/export function assignRoles(data) {return request({url: '/sys/user/assignRoles',data,method: 'put'})}

然后，在src/views/employees/components/assign-role.vue中绑定按钮点击事件：

<el-button type="primary" size="small" @click="btnOK">确定</el-button><el-button size="small" @click="btnCancel">取消</el-button>async btnOK() {await assignRoles({id: this.userId, roleIds: this.roleIds })// 关闭窗体this.$emit('update:showRoleDialog', false)},//点击取消或关闭对话框时调用btnCancel() {this.roleIds = [] // 清空原来的数组this.$emit('update:showRoleDialog', false)}

三、权限管理页面

3.1 权限管理页面效果图

3.2 权限管理页面的基础布局

在src/views/permission/index.vue中添加如下代码：

3.3 封装权限管理相关请求

在src/api/permisson.js中添加如下代码：

// 获取权限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}`})}

3.4 获取权限数据

我们通过树形操作方法，将列表转化成层级数据，这里需要给el-table配置row-key属性 id才可显示树形结构

在src/views/permission.js中添加如下代码：

<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 type="text" >添加</el-button><el-button type="text" >编辑</el-button><el-button type="text" >删除</el-button></template></el-table-column></el-table><script>import {getPermissionList } from '@/api/permission'import {transListToTreeData } from '@/utils'export default {data() {return {list: [],}},created() {this.getPermissionList()},methods: {async getPermissionList() {this.list = transListToTreeData(await getPermissionList(), '0')}}}</script>

3.5 新增、编辑和删除权限

在src/views/permission.js中新建新增和编辑权限对话框：

<page-tools><template v-slot:after><el-button type="primary" size="small" @click="addPermission(1, '0')">添加权限</el-button></template></page-tools><el-button v-if="row.type === 1" type="text" @click="addPermission(2, row.id)">添加</el-button><el-button type="text" @click="editPermission(row.id)">编辑</el-button><el-button type="text" @click="delPermission(row.id)">删除</el-button> <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-switchv-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>

绑定数据：

import {updatePermission, addPermission, getPermissionDetail, delPermission, getPermissionList } from '@/api/permission'data() {return {list: [],showDialog: false,formData: {name: '', // 名称code: '', // 标识description: '', // 描述type: '', // 类型该类型不需要显示因为点击添加的时候已经知道类型了pid: '', // 因为做的是树需要知道添加到哪个节点下了enVisible: '0' // 开启},rules: {name: [{required: true, message: '权限名称不能为空', trigger: 'blur' }],code: [{required: true, message: '权限标识不能为空', trigger: 'blur' }]}}},computed: {showText() {return this.formData.id ? '编辑权限' : '新增权限'}},methods: {delPermission(id) {this.$confirm('确认删除该权限点吗').then(() => {return delPermission(id)}).then(() => {this.$message.success('删除成功')// 重新拉取数据this.getPermissionList()})},addPermission(type, pid) {// 访问权的type = 1 按钮操作的权type =2// pid表示当前数据的父节点的标识// 记录当前添加的类型和父标识this.formData.type = typethis.formData.pid = pidthis.showDialog = true},async editPermission(id) {this.formData = await getPermissionDetail(id)this.showDialog = true}btnOK() {this.$refs.permForm.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.permForm.resetFields() // 移除校验this.showDialog = false},}

四、给角色分配权限

4.1 分配权限效果图

4.2 封装分配权限的请求

在src/api/setting.js中添加如下代码：

// 给角色分配权限export function assignPerm(data) {return request({url: '/sys/role/assignPrem',method: 'put',data})}

4.3 新建分配权限弹窗

在src/views/settings/index.vue中添加弹窗基本布局：

<el-button size="small" type="success" @click="assignPerm(row.id)">分配权限</el-button><el-dialog title="分配权限" :visible="showPermDialog" @close="btnPermCancel"><el-treeref="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>

绑定数据：

import {getRoleDetail, assignPerm } from '@/api/setting'import {transListToTreeData } from '@/utils'import {getPermissionList } from '@/api/permission'data() {return {showPermDialog: false, // 控制分配权限弹层的显示或者隐藏permData: [], // 接收权限数据defaultProps: {label: 'name'}, // 定义显示字段的名称和子属性的字段名称roleId: null, // 用来记录当前分配权限的idselectCheck: [] // 用来记录当前的权限点的标识}},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的方法await assignPerm({permIds: this.$refs.permTree.getCheckedKeys(), id: this.roleId })this.$message.success('分配权限成功')this.showPermDialog = false},btnPermCancel() {this.selectCheck = [] // 重置数据this.showPermDialog = false}}