This time I will bring you a detailed explanation of the steps of vue iview dynamic routing and permission verification. What are the precautions when using vue iview dynamic routing and permission verification. The following is a practical case, let's take a look.
There are many examples of dynamic addition of routes in Vue on github. After referring to some projects, this project completed the dynamic addition of dynamic routes and menu refresh based on the iview framework. In order to help other friends in need, I now share the implementation logic. Welcome to communicate and learn together.
Github address
iview-dynamicRouter
Achieve the goal
After the client gets the routing and permission data from the server, Refresh the project's routing and menu lists, and perform permission control.
Project basis
Implementation logic
Dynamic routing control loading
Generally Said that there are two types of dynamic routing control: one is to store all routing data in local files, and then obtain the user's permission information from the server. When the route jumps, add a permission judgment hook. If the page the user goes to is not Within the permission list, jumping is prohibited. The other is to store only basic routes locally, such as iview-admin project divides routing into three types:router.addRoutes(routes) to complete the dynamic addition of the route list; the second part is because the page under the iview-admin framework Tags and Breadcrumb Navigation need to traverse the appRouter to obtain routing information, so we also need to store routing data in vuex for global access.
routing address is not found, will jump by default. When you get to the 404 error page, the experience is very poor, so the 404 route is not written into the routing rules first and is loaded together with the dynamic route.
The main code is implemented as follows: Data request and routing node generation
//util.js
//生成路由
util.initRouter = function (vm) {
const constRoutes = [];
const otherRoutes = [];
// 404路由需要和动态路由一起注入
const otherRouter = [{
path: '/*',
name: 'error-404',
meta: {
title: '404-页面不存在'
},
component: 'error-page/404'
}];
// 模拟异步请求
util.ajax('menu.json').then(res => {
var menuData = res.data;
util.initRouterNode(constRoutes, menuData);
util.initRouterNode(otherRoutes, otherRouter);
// 添加主界面路由
vm.$store.commit('updateAppRouter', constRoutes.filter(item => item.children.length > 0));
// 添加全局路由
vm.$store.commit('updateDefaultRouter', otherRoutes);
// 刷新界面菜单
vm.$store.commit('updateMenulist', constRoutes.filter(item => item.children.length > 0));
});
};
//生成路由节点
util.initRouterNode = function (routers, data) {
for (var item of data) {
let menu = Object.assign({}, item);
menu.component = lazyLoading(menu.component);
if (item.children && item.children.length > 0) {
menu.children = [];
util.initRouterNode(menu.children, item.children);
}
//添加权限判断
meta.permission = menu.permission ? menu.permission : null;
//添加标题
meta.title = menu.title ? menu.title : null;
menu.meta = meta;
}
};Dynamic loading of components
//lazyLoading.js
export default (url) =>()=>import(`@/views/${url}.vue`)
Store缓存实现
//app.js
// 动态添加主界面路由，需要缓存
updateAppRouter (state, routes) {
state.routers.push(...routes);
router.addRoutes(routes);
},
// 动态添加全局路由，不需要缓存
updateDefaultRouter (state, routes) {
router.addRoutes(routes);
},
// 接受前台数组，刷新菜单
updateMenulist (state, routes) {
state.menuList = routes;
}//main.js
mounted () {
// 调用方法，动态生成路由
util.initRouter(this);
}Permission control
Similar to the dynamic routing implementation method, operation permission control is generally divided into two types. The first is when the page is displayed. Without controlling permissions, all operations, such as buttons, are displayed. Then when the operation is initiated, the permissions are judged. If the user has the permissions for the operation, it passes, otherwise the user is reminded that he does not have permissions. The second is when the page is loaded. , the permissions are judged, and operations without permissions are not displayed. I prefer the second method, which will not mislead the user. I personally think that what the user sees should be operable, otherwise it will be very uncomfortable to click the button and then be prompted that there is no permission. The source of ideas for this project can be found in the reference blog post. The original blogger’s specific idea is: in the meta field of the routing structure, The main code is implemented as follows: Add the permission field in the routing data to store the permission list//menu.json，模拟异步请求数据
[
{
"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"]
},
...
]
}
]在遍历生成路由节点时，将 permission 字段数据存入路由节点 meta 属性中
//util.js
//生成路由节点
util.initRouterNode = function (routers, data) {
for (var item of data) {
....
//添加权限判断
meta.permission = menu.permission ? menu.permission : null;
...
}
};定义全局命令组件，读取路由 permission 属性值获得权限列表，如果该不权限在权限列表中，则删除节点
//hasPermission.js
const hasPermission = {
install (Vue, options) {
Vue.directive('hasPermission', {
bind (el, binding, vnode) {
let permissionList = vnode.context.$route.meta.permission;
if (permissionList && permissionList.length && !permissionList.includes(binding.value)) {
el.parentNode.removeChild(el);
}
}
});
}
};
export default hasPermission;权限组件使用示例：
page1
全局注册组件
// main.js import hasPermission from '@/libs/hasPermission.js'; Vue.use(hasPermission);
这种权限控制方法的优点就是，不管是管理配置还是页面处理逻辑都相对简单，没有很多重复的代码判断和节点处理，在参考对比了网上几种实现方式后，个人比较推荐这一种方法。
页面标签和面包屑导航
在我看来，页面标签和面包屑都属于系统中锦上添花的页面相关控件，提高页面管理的便捷性，在iview官方admin项目中已经实现了这两个组件。所以这个项目中，只是将其进行移植，实现了组件功能，没有深入了解，感兴趣的可以仔细研究。
相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！
推荐阅读：
The above is the detailed content of Detailed explanation of vue iview dynamic routing and permission verification steps. For more information, please follow other related articles on the PHP Chinese website!
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
