Permission Design-RBAC Permission Design Ideas
First of all, let's understand what is the traditional permission design
From the above figure, we found that the traditional permission design is to set individual permissions for each person, but this method is no longer suitable for the development needs of the current enterprise's efficient management and control of permissions, because everyone has to set permissions individually
Based on this, RBAC's permission model came into being. RBAC (Role-Based Access control), that is, a role-based permission assignment solution, compared with traditional solutions, RBAC provides the middle layer Role (role), and its permission model as follows
RBAC realizes the separation of users and permission points. If you want to set permissions for a user, you only need to set the corresponding role for the user, and the role has the corresponding permissions. In this way, the allocation and design of permissions It is minimalist and efficient. When you want to withdraw the authority from the user, you only need to withdraw the role. Next, we will implement this idea in this project
Assign employee roles to
目标On the employee management page, assign roles
New Assign Role Form
In the previous chapter, we did not implement the role function of employee management. In this chapter, we implement the assignment of roles to employees
1对多From the above figure, it can be seen that the relationship between users and roles is that a user can have multiple roles. For example, the chairman of the company can have the same role as the general manager and the system administrator.
First, create a new assign role formemployees/components/assign-role.vue
<template>
<el-dialog title="Assign Role" :visible="showRoleDialog">
<!-- el-checkbox-group selects the role owned by the current user and needs to be bound to the role owned by the current user -->
< el-checkbox-group>
<!-- options -->
</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
},
// The user's id is used to query the current user's role information
userId: {
type: String,
default: null
}
}
}
</script>
Get list of roles and current user role
Get a list of all rolesassign-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>
get role listassign-role.vue
import { getRoleList } from '@/api/setting'
export
default {
props: {
showRoleDialog: {
type: Boolean,
default: false
},
userId: {
type: String,
default: null
}
},
data() {
return {
list: [], // role list
roleIds: []
}
},
created() {
this.getRoleList()
},
methods: {
// get all roles
async getRoleList() {
const { rows } = await getRoleList()
this .list = rows
}
}
}
Get the user's current roleassign-role.vue
import { getUserDetailById } from '@/api/user'
async
getUserDetailById(id) {
const { roleIds } = await getUserDetailById(id)
this.roleIds = roleIds // assign the role of this user
}
Click on the role pop-up layeremployees/index.vue
import assignRole from './components/assign-role.vue' // import component
components
: {
...,
assignRole // register component
},
data
(){
return {
userId:null // user id
}
}
<!-- Place the role assignment component --> <assign-role ref="assignRole" :show-role-dialog.sync="showRoleDialog" :user-id="userId" />
// edit role
async editRole(id) {
this.userId = id // props passing value is asynchronous
await this.$refs.assignRole.getUserDetailById(id) // parent component calls child component method
this.showRoleDialog = true
}
<!-- button call--> <el-button type="text" size="small" @click="editRole(row.id)">Role</el-button>
Assign roles to employees
Assign role interface api/employees.js
/** *
* Assign roles to users
* ***/
export function assignRoles(data) {
return request({
url: '/sys/user/assignRoles',
data,
method: 'put'
})
}
OK to save assign-role.vue
import { assignRoles } from '@/api/employees'
async btnOK() {
await assignRoles({ id: this.userId, roleIds: this.roleIds })
this.$message.success('set successfully')
// close the form
this.$emit('update:showRoleDialog', false)
},
cancel or close assign-role.vue
btnCancel() {
this.roleIds = [] // Clear the original array
this.$emit('update:showRoleDialog', false)
}
submit code
本节任务Assign employee permissions
Authority point management page development
目标: Complete the development and management of the permission point page
New permission point management page
People already have roles, so what are the permissions
In enterprise services, permissions are generally divided into page access permissions , button operation permissions , and API access permissions
API permissions are mostly intercepted at the backend, so our version only does
页面访问and按钮操作授权/
From this, we can design authority management pages according to business needs
Complete permissions page structure 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>
Add, delete, modify and check requests for encapsulating rights management src/api/permisson.js
import request from '@/utils/request'
//
Get permissions
export function getPermissionList(params) {
return request({
url: '/sys/permission',
params
})
}
// Add new permissions
export function addPermission(data) {
return request({
url: '/sys/permission',
method: 'post',
data
})
}
//
update permission
export function updatePermission(data) {
return request({
url: `/sys/permission/${ data.id}`,
method: 'put',
data
})
}
//
delete permission
export function delPermission(id) {
return request({
url: `/sys/permission/${id}`,
method: 'delete'
})
}
// get permission details
export function getPermissionDetail(id) {
return request({
url: `/sys/permission/ ${id}`
})
}
Get permission data and convert tree
Here, we convert the list into hierarchical data through the tree operation method
<script>
import { getPermissionList } from '@/api/permission'
import { tranListToTreeData } from '@/utils'
export default {
data() {
return {
list: [],
formData: {
name: '', // name
code: '', // identification
description: '', // description
type: '', // the type does not need to be displayed because the type is already known when clicking add
pid: '', // because it is a tree Need to know which node is added to
enVisible: '0' // open
},
rules: {
name: [{ required: true, message: 'The permission name cannot be empty', trigger: 'blur' }],
code: [ { required: true, message: 'Permission ID cannot be empty', trigger:'blur' }]
},
showDialog: false
}
},
created() {
this.getPermissionList()
},
computed: {
showText() {
return this.formData.id ? '编辑' : '新增'
}
},
methods: {
async getPermissionList() {
this.list = tranListToTreeData(await getPermissionList(), '0')
}
}
}
</script>
Bind form data
<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>
It should be noted that if you need a tree table, you need to configure the row-key attribute id for el-table
When type is 1, it is access permission, when type is 2, it is function permission
As in the previous content, we need to complete the new permission/delete permission/edit permission
Added pop-up layer with edit permission
Add permission/edit permission pop-up layer
<!-- Place a popup layer to edit new nodes -->
<el-dialog :title="`${showText}Permission Point`" :visible="showDialog" @close="btnCancel"> <!
- - Form -->
<el-form ref="perForm" :model="formData" :rules="rules" label-width="120px"> <el-form-
item label="permission name" prop="name ">
<el-input v-model="formData.name" style="width:90%" />
</el-form-item>
<el-form-item label="permission identification" prop="code" >
<el-input v-model="formData. code" style="width:90%" />
</el-form-item>
<el-form-item label="permission description">
<el-input v-model="formData.description" style="width:90%" />
< /el-form-item>
<el-form-item label="on">
<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>
Add, edit, delete permission points
<template v-slot:after>
<el-button type="primary" size="small" @click="addPermission(0,1)">添加权限</el-button>
</template>
Add/delete/edit logic
import { updatePermission, addPermission, getPermissionDetail, delPermission, getPermissionList } from '@/api/permission'
methods: {
// Delete operation
async delPermission(id) {
try {
await this.$confirm('Are you sure you want to delete this data')
await delPermission(id)
this.getPermissionList()
this.$message.success('delete successful')
} catch (error) {
console.log(error)
}
},
btnOK() {
this.$refs.perForm.validate( ).then(() => {
if (this.formData.id) {
return updatePermission(this.formData)
}
return addPermission(this.formData)
}).then(() => {
// prompt message
this.$message.success('Add success')
this.getPermissionList()
this.showDialog = false
})
},
btnCancel() {
this.formData = {
name: '' , // Name
code: '', // Identification
description: '', // Description
type: '', // The type does not need to be displayed because the type is already known when you click Add
pid: '', // Because What to do is that the tree needs to know which node it is added to.
enVisible: '0' // open
}
this.$refs.perForm.resetFields()
this.showDialog = false
},
addPermission(pid, type) {
this.formData.pid = pid
this. formData.type = type
this.showDialog = true
},
async editPermission(id) {
// Get the details according to the id
this.formData = await getPermissionDetail(id)
this.showDialog = true
}
}
submit code
本节任务: Permission point management page development
Assign permissions to roles
目标: Complete the business of assigning permissions to roles
Create a pop-up layer for assigning permissions
In the chapter of company settings, we did not implement the function of assigning permissions, let's implement it here
API for encapsulating and assigning permissions src/api/setting.js
// Assign permissions to roles
export function assignPerm(data) {
return request({
url: '/sys/role/assignPrem',
method: 'put',
data
})
}
Assign permissions to roles pop-up layer
<el-dialog title="Assign permissions" :visible="showPermDialog" @close="btnPermCancel"> <! -- Permissions are a tree --> <!-- Bind data to components --> < !-- check-strictly If it is true, it means that the parent and child are not related to each other when they are checked. If it is false, they are related to each other --> <!-- id is used as a unique identifier --> <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" /> <!-- OK to cancel --> <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>
define data
showPermDialog: false, // Control the display of the pop-up layer for assigning permissions, and the latter hides
defaultProps: {
label: 'name'
},
permData: [], // Specially used to receive permission data tree data
selectCheck: [], // Definition An array to receive the selected nodes
roleId: null // used to record the id of the assigned role
Click to assign permissions
<el-button size="small" type="success" @click="assignPerm(row.id)">分配权限</el-button>
Assign permissions to roles
Assign Permissions / Tree Data ( setting/index.vue)
import { ..., assignPerm } from '@/api/setting'
import { transListToTreeData } from '@/utils'
import { tranListToTreeData } from '@/api/permission'
methods: {
// Click to assign permissions
// Get permissions The point data is called to obtain the permission point data when clicked
async assignPerm(id) {
this.permData = tranListToTreeData(await getPermissionList(), '0') // convert list to tree data
this.roleId = id
// should be obtained The permission point of this id
// if there is an id, the id should be recorded first
const { permIds } = await getRoleDetail(id) // permIds is the permission point data owned by the current role
this.selectCheck = permIds // will be owned by the current role The permission id assignment
this.showPermDialog = true
},
async btnPermOK() {
// call the method of el-tree
// console.log(this.$refs.permTree.getCheckedKeys())
await assignPerm({ permIds: this.$refs.permTree.getCheckedKeys(), id: this.roleId })
this.$message.success('Assign Permission succeeded')
this.showPermDialog = false
},
btnPermCancel() {
this.selectCheck = [] // reset data
this.showPermDialog = false
}
}
submit code
本节任务Assign permissions to roles