There are many examples of dynamic addition of Vue on Github. After referring to some projects in this project, dynamic addition and menu refresh of dynamic routing are completed based on the iView framework. In order to help other friends in need, we will share the implementation logic. Welcome to communicate and learn together.
Github address
iview-dynamicRouter
Achieve the goal
After the client obtains the routing and permission data from the server, it refreshes the project's route and menu list and performs permission control.
Project Basics
- Basic framework: The template branch project of iview-admin official template project, iview-admin, is the basic framework code of iview-admin. Project address:iview-admin
Implementation logic
Dynamic routing control loading
Generally speaking, dynamic routing control is divided into two types: one is to store all routing data in a local file, and then obtain the user's permission information from the server. When routing jumps, add a permission judgment hook. If the page the user is headed to is not in the permission list, jumping is prohibited. Another way is to store only basic routes locally, such as error handling pages, permissionless control pages, etc., while permission routes are obtained from the server. The server issues corresponding routing data based on the user's permissions. The client uses this data to dynamically generate and add routes. This article uses the second method.
The iview-admin project divides routing into three types:
- Page routes that are not displayed as subpages of Main components, such as login, 404, 403 and other error page routes;
- The routes displayed as subpages of the Main component but not displayed in the left menu are otherRouter, such as homepage routing;
- The routes displayed as subpages of the Main component and displayed in the left menu appRouter;
After getting the routing data, we mainly perform two parts of operations. The first part is to traverse the data, use the asynchronous loading method of components to load the corresponding components of each routing node, and then use(routes) Complete dynamic addition of the routing list; the second part is because iview-admin The page label and breadcrumb navigation under the framework need to traverse the appRouter to obtain routing information, so we also need to store the routing data into vuex for global access.
It should be noted that if the 404 page is a static route, then when you enter the page for the first time, the dynamic route has not yet been loaded. If the route address cannot be found, it will jump to the 404 error page by default. The experience is very poor, so the 404 route will not be written into the routing rules for the first time and load it with the dynamic route.
The main code implementation is as follows:
Data request and routing node generation
//
//Generate a route = function (vm) {
const constRoutes = [];
const otherRoutes = [];
// 404 routing needs to be injected together with dynamic routing const otherRouter = [{
path: '/*',
name: 'error-404',
meta: {
title: '404-The page does not exist'
},
component: 'error-page/404'
}];
// Simulate asynchronous requests ('').then(res => {
var menuData = ;
(constRoutes, menuData);
(otherRoutes, otherRouter);
// Add main interface routing vm.$('updateAppRouter', (item => > 0));
// Add global route vm.$('updateDefaultRouter', otherRoutes);
// Refresh the interface menu vm.$('updateMenulist', (item => > 0));
});
};
//Generate routing node = function (routers, data) {
for (var item of data) {
let menu = ({}, item);
= lazyLoading();
if ( && > 0) {
= [];
(, );
}
//Add permission judgment = ? : null;
//Add a title = ? : null;
= meta;
}
};
Dynamically load components
//
export default (url) =>()=>import(`@/views/${url}.vue`)
StoreCache implementation
//
// Dynamically add the main interface route, which requires cacheupdateAppRouter (state, routes) {
(...routes);
(routes);
},
// Dynamically add global routes, no cache is requiredupdateDefaultRouter (state, routes) {
(routes);
},
// Accept the foreground array and refresh the menuupdateMenulist (state, routes) {
= routes;
}
Finally make the call in
//
mounted () {
// Call method to generate routes dynamically (this);
}
Permission control
Similar to the dynamic routing implementation method, operation permission control is generally divided into two types. The first is that the page does not control permissions when displaying. All operations, such as all buttons are displayed, and then when the operation is initiated, permission judgment is made. If the user has permission for the operation, it will pass, otherwise the user will be reminded that there is no permission. The second is that when the page is loaded, permission judgment is made. Operations without permission are not displayed. I prefer the second method, which will not mislead the user. I personally think that what the user sees should be operational, otherwise it will be very unhappy to click the button and then prompt that there is no permission.
The source of the idea of this project is shown in the reference blog post. The original blogger's specific idea is: in the meta field of the routing structure, add the user operation permission list, and then register the global command. When the node is rendered for the first time, determine whether the permissions exist on the page. If it exists and the passed parameters are not in the permission list, delete the node directly.
The main code implementation is as follows:
Add permission field to the routing data to store permission list
//, simulate asynchronous request data[
{
"path": "/groupOne",
"icon": "ios-folder",
"name": "system_index",
"title": "groupOne",
"component": "Main",
"children": [
{
"path": "pageOne",
"icon": "ios-paper-outline",
"name": "pageOne",
"title": "pageOne",
"component": "group/page1/page1",
"permission":["del"]
},
...
]
}
]
When traversing the generated routing node, store permission field data into the routing node meta attribute
//
//Generate routing node = function (routers, data) {
for (var item of data) {
....
//Add permission judgment = ? : null;
...
}
};
Define global command components, read the routing permission attribute value to obtain the permission list, if the permission is not in the permission list, delete the node
//
const hasPermission = {
install (Vue, options) {
('hasPermission', {
bind (el, binding, vnode) {
let permissionList = .$;
if (permissionList && && !()) {
(el);
}
}
});
}
};
export default hasPermission;
Example of permission component usage:
<template> <div> <h1>page1</h1> <Button v-hasPermission="'add'">Add to</Button> <Button v-hasPermission="'edit'">Revise</Button> <Button v-hasPermission="'del'">delete</Button> </div> </template>
Global Register Components
// import hasPermission from '@/libs/'; (hasPermission);
The advantage of this permission control method is that both the management configuration and the page processing logic are relatively simple, and there are no many duplicate code judgments and node processing. After referring to and comparing several implementation methods on the Internet, I personally recommend this method.
Page tags and breadcrumb navigation
In my opinion, page tags and breadcrumbs are both page-related controls that are icing on the cake in the system, improving the convenience of page management. These two components have been implemented in the official iView admin project. So in this project, it is just ported to implement component functions. There is no in-depth understanding. Those who are interested can study it carefully.
Summarize
The above is the editor’s introduction to the implementation of dynamic routing and permission verification functions of vue iView. I hope it will be helpful to everyone. If you have any questions, please leave me a message and the editor will reply to everyone in time. Thank you very much for your support for my website!