In order to further realize the dynamic routing function mentioned above and add permission control for each route (i.e. permission control for adding, deleting, modifying, and checking buttons), we need to make some improvements and extensions to the design of the database, back-end interface, and front-end. Below I will describe in detail how to add, delete, modify and check permission control on the route based on the existing solution.
1. Database design extension
In order to achieve finer granular permission control, we need to make some modifications and extensions to the database structure and increase support for routing permissions. Each route will be associated with four permissions: addition, deletion, modification, and search.
1.1 Modify the route table (routes)
First, we need to expand the routing table to support the addition, deletion, modification and query permissions of each route.
CREATE TABLE routes (
id INT AUTO_INCREMENT PRIMARY KEY,
path VARCHAR(255) NOT NULL,
component VARCHAR(255) NOT NULL,
name VARCHAR(255) NOT NULL,
parent_id INT DEFAULT 0,
meta JSON DEFAULT NULL,
is_enabled BOOLEAN DEFAULT TRUE,
created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
updated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP,
-- increase、delete、change、Check permissions
permission_create BOOLEAN DEFAULT FALSE,
permission_delete BOOLEAN DEFAULT FALSE,
permission_update BOOLEAN DEFAULT FALSE,
permission_view BOOLEAN DEFAULT TRUE
);- permission_create: Whether the route has increased permissions.
- permission_delete: Whether the route has delete permission.
- permission_update: Whether the route has permission to change.
- permission_view: Whether the route has check permission.
1.2 Modify roles and routing permission tables (role_routes)
In the role_routes table, new fields are added to store role permissions on routes, corresponding to addition, deletion, modification, and search.
CREATE TABLE role_routes (
role_id INT,
route_id INT,
permission_create BOOLEAN DEFAULT FALSE,
permission_delete BOOLEAN DEFAULT FALSE,
permission_update BOOLEAN DEFAULT FALSE,
permission_view BOOLEAN DEFAULT TRUE,
PRIMARY KEY (role_id, route_id),
FOREIGN KEY (role_id) REFERENCES roles(id),
FOREIGN KEY (route_id) REFERENCES routes(id)
);
Each record indicates the role's permissions to a route.
2. Backend interface design
In the backend, we need to ensure that the permissions of the route are returned correctly when obtaining the route data, and that permission control is carried out during the route operations (such as adding, deleting, modifying, and viewing).
2.1 Modify and obtain the routing interface
Modify the /api/get_routes interface, add support for routing permissions, and return the permission information of each route to add, delete, modify, and check.
@('/api/get_routes', methods=['GET'])
def get_routes():
role_name = ('role')
role = .filter_by(name=role_name).first()
if not role:
return jsonify({'message': 'Role not found'}), 404
routes = (Route).join(RoleRoute).filter(RoleRoute.role_id == ).all()
routes_data = []
for route in routes:
role_route = .filter_by(role_id=, route_id=).first()
routes_data.append({
'path': ,
'component': ,
'name': ,
'meta': ,
'permissions': {
'create': role_route.permission_create,
'delete': role_route.permission_delete,
'update': role_route.permission_update,
'view': role_route.permission_view
}
})
return jsonify(routes_data)In this interface, we use the RoleRoute table to obtain the corresponding routing permissions for each role and return these permissions together.
2.2 Adding the interface to routing permissions
We also need to provide an interface to modify routing permissions (that is, to set the permissions for the role to add, delete, modify, and check).
@('/api/set_route_permissions', methods=['POST'])
def set_route_permissions():
data =
role_id = data['role_id']
route_id = data['route_id']
permission_create = data['permission_create']
permission_delete = data['permission_delete']
permission_update = data['permission_update']
permission_view = data['permission_view']
role_route = .filter_by(role_id=role_id, route_id=route_id).first()
if not role_route:
role_route = RoleRoute(role_id=role_id, route_id=route_id)
(role_route)
role_route.permission_create = permission_create
role_route.permission_delete = permission_delete
role_route.permission_update = permission_update
role_route.permission_view = permission_view
()
return jsonify({'message': 'Permissions updated successfully'})
This interface receives role ID, routing ID, and settings for adding, deleting, modifying, and checking permissions, and updates permission data in the database.
3. Front-end implementation
The front-end needs to dynamically generate routes based on the routing information and permission data obtained from the back-end interface, and control the display and operation permissions of buttons under different routes based on permissions.
3.1 Dynamically generate routes
The front-end routing configuration needs to be loaded dynamically, and the current user's permissions to the route are determined during route generation.
In router/, we can configure dynamic routing based on permission information.
import Vue from 'vue';
import Router from 'vue-router';
import store from '../store';
(Router);
const router = new Router({
routes: []
});
function generateRoutes(routes) {
const routeArray = [];
(route => {
const routeConfig = {
path: ,
name: ,
component: () => import(`@/views/${}.vue`), // Dynamically load components meta: ,
permissions: // Save permission data };
if ( && > 0) {
= generateRoutes();
}
(routeConfig);
});
return routeArray;
}
(async (to, from, next) => {
if (!) {
const res = await ('getRoutes');
const routes = generateRoutes(res);
(route => {
(route);
});
next({ ...to, replace: true });
} else {
next();
}
});
export default router;
3.2 Dynamically display buttons according to permissions
The operation buttons on the front-end page (such as adding, deleting, modifying, and checking) need to be displayed and hidden according to the user's permission to the route. Assuming each page has these buttons, we can use the v-if directive to control whether it is displayed or not based on permissions.
<template>
<div>
<button v-if="hasCreatePermission">New</button>
<button v-if="hasUpdatePermission">edit</button>
<button v-if="hasDeletePermission">delete</button>
<button v-if="hasViewPermission">Check</button>
</div>
</template>
<script>
export default {
computed: {
hasCreatePermission() {
return this.$;
},
hasUpdatePermission() {
return this.$;
},
hasDeletePermission() {
return this.$;
},
hasViewPermission() {
return this.$;
}
},
created() {
(this.$);
},
methods: {
setPermissions(permissions) {
this.$('setUserPermissions', permissions);
}
}
}
</script>
In this component, we use the v-if directive to display the corresponding buttons according to permissions. Computation properties such as hasCreatePermission, hasUpdatePermission, etc. return the permissions of the current user to the page. The setPermissions method will set the permissions of the current user when the page is loaded.
3.3 Store user permissions in Vuex
In Vuex, we can store user permission data and access it in different components.
//
export default new ({
state: {
userPermissions: {
create: false,
delete: false,
update: false,
view: true
}
},
mutations: {
setUserPermissions(state, permissions) {
= permissions;
}
},
actions: {
async getRoutes({ commit }) {
const res = await ('/api/get_routes', { params: { role: 'admin' } });
commit('setRoutes', );
return ;
}
}
});4. Summary
Through the above design and implementation, we can dynamically generate routes based on routes and permissions on the front end, and set permissions for adding, deleting, modifying, and checking operations for each route. The backend is responsible for returning the corresponding permission information based on the user's role, and the frontend manages dynamic routing and user permissions through vue-router and vuex. In this way, the system can flexibly display different functions according to roles and permissions, and effectively control the user's operational permissions on data.
This design method is very suitable for complex permission management systems, can provide fine-grained permission control, and can be flexibly adjusted as business needs change.
This is the article about the detailed explanation of the complete implementation plan of dynamic permissions to buttons in Vue. For more related Vue dynamic permission content, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!