Vue + Element UI implements permission management system front-end (13): page permission control
Access control scheme
Since it is a background permission management system, of course permission control is indispensable. As for permission control, the front-end aspect is of course access to and operation control of page resources.
Front-end resource permissions are mainly divided into two parts, namely, the viewing permission of the navigation menu and the operating permission of the page addition, deletion and modification operation buttons.
Our design uniformly stores the page navigation menu and page operation buttons in the menu database table. The menu table contains the following permission concerns.
Menu type
Menu type code The type of page resource. Types include, 0: Directory 1: Menu 2: Button.
Permission ID
The permission identifier represents the resource of this page and is a unique identifier used for permission control, mainly for permission control of addition, deletion, modification, and query.
Permission identifiers include: sys:user:add: add sys:user:edit: edit sys:user:delete: delete sys:user:view: view.
Note: Currently, viewing can be controlled through the menu visibility, so the viewing permission flag is not currently used. If you need to display a page without permission, you can use it.
Menu table structure
The specific menu table structure is as follows.
-- ------------------------------------------------ -- menu -- ------------------------------------------------ -- Table structure for `sys_menu` -- ------------------------------------------------ CREATE TABLE `sys_menu` ( `id` bigint NOT NULL AUTO_INCREMENT COMMENT 'number', `name` varchar(50) COMMENT 'Menu name', `parent_id` bigint COMMENT 'Parent menu ID, the first-level menu is 0', `url` varchar(200) COMMENT 'Menu URL', `perms` varchar(500) COMMENT 'Authorization (separate multiple by commas, such as: sys:user:add,sys:user:edit)', `type` int COMMENT 'Type 0: Directory 1: Menu 2: Button', `icon` varchar(50) COMMENT 'menu icon', `order_num` int COMMENT 'Sort', `create_by` varchar(50) COMMENT 'Creator', `create_time` datetime COMMENT 'Creation time', `last_update_by` varchar(50) COMMENT 'Update person', `last_update_time` datetime COMMENT 'update time', `del_flag` tinyint DEFAULT 0 COMMENT 'Delete or not -1: Deleted 0: Normal', PRIMARY KEY (`id`) ) ENGINE=InnoDB DEFAULT CHARSET=utf8 COMMENT='Menu Management';
Navigation menu implementation ideas
1. User login system
After the user logs in to the system, he jumps to the home page.
2. Load navigation menu based on user
The user navigation menu is loaded and stored in the store when the route navigation guard is routed.
The loading process is as follows, and the result exclusion button type is returned.
user -> user_role -> role -> role_menu -> menu。
3. Navigation bar reads menu tree
Navigation bar to sotre to read the navigation tree and display it.
Page button implementation ideas
1. User login system
After the user logs in to the system, he jumps to the home page.
2. Load the permission identification collection according to the user
Load the user permission identifier collection when routing navigation guards.
The loading process is as follows, and the returned result is a collection of user permission identifiers.
user -> user_role -> role -> role_menu -> menu。
3. Page button control
The page operation button provides permission identification, and queries whether it is in the user permission identification collection.
In: with permission, visible or available, not in: without permission, invisible or disabled.
Currently this system uses state disabling.
Permission control implementation
Navigation menu permissions
Load navigation menu
As shown in the figure below, the navigation menu is loaded and the state is saved when the navigation guard is routed.
router/index.js
Page component reference
The navigation bar page reads the navigation menu tree from the shared state and displays it.
views/NavBar/NavBar.vue
views/NavBar/NavBar.vue
Page button permissions
Add permission acquisition interface
http/modules/user.js
//Find the user's menu permission identifier collection
export const findPermissions = (params) => {
return axios({
url: '/user/findPermissions',
method: 'get',
params
})
}
Add permission acquisition interface
store/modules/user.js
export default {
state: {
perms: [], // User permission identifier collection
},
getters: {
},
mutations: {
setPerms(state, perms){ // Collection of user permission identifiers
state.perms = perms;
}
},
actions: {
}
}
Load permission ID
As shown in the figure below, the permission identifier is loaded and the state is saved when navigating the guard route.
router/index.js
Permission button judgment
Encapsulates the permission operation button component, and performs permission judgment based on the external permission identification passed in the component.
views/Core/KtButton.vue
<template>
<el-button :size="size" :type="type"
:loading="loading" :disabled="!hasPerms(perms)" @click="handleClick">
{
{label}}
</el-button>
</template>
<script>
import { hasPermission } from '@/permission/index.js'
export default {
name: 'KtButton',
props: {
label: { // Button displays text
type: String,
default: 'Button'
},
size: { //Button size
type: String,
default: 'mini'
},
type: { //Button type
type: String,
default: null
},
loading: { //Button loading identifier
type: Boolean,
default: false
},
disabled: { // Is the button disabled?
type: Boolean,
default: false
},
perms: { // Button permission identifier, passed in by external users
type: String,
default: null
}
},
data() {
return {
}
},
methods: {
handleClick: function () {
//Button operation processing function
this.$emit('click', {})
},
hasPerms: function (perms) {
//Permission judgment based on permission identification and external indication status
return hasPermission(perms) & !this.disabled
}
},
mounted() {
}
}
</script>
<style scoped>
</style>
Permission judgment logic
src/permission/index.js
import store from '@/store'
/**
* Determine whether the user has operating permissions
* Based on the incoming permission ID, check whether there is a set of user permission IDs
* @param perms
*/
export function hasPermission (perms) {
let hasPermission = false
let permissions = store.state.user.perms
for(let i=0, len=permissions.length; i<len; i++) {
if(permissions[i] === perms) {
hasPermission = true;
break
}
}
return hasPermission
}
Permission button reference
views/Sys/User.vue
Test effect
1. Available state, the operation button is available.
2. Modify the permission mark of the page, causing authentication to fail.
As shown in the figure below, modifying the permission identification of the add and delete buttons (adding a 2) causes permission authentication to fail.
3. Without permission, the operation button is disabled.
The add and delete buttons failed to match due to modified permission identifiers and became disabled.
