


Detailed explanation of vue iview dynamic routing and permission verification steps
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
- ##Basic framework: The template branch project of iview component library official template project iview-admin, this project is of iview-admin Basic framework code. Project address: iview-admin
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:- Page routing that is not displayed as a sub-page of the Main component, such as login, 404, 403 and other error pages Routing;
- is displayed as a sub-page of the Main component but is not displayed in the left menu otherRouter, such as home page routing;
- is used as the Main component The sub-page is displayed and the routing appRouter displayed in the left menu;
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; }Finally in main. Calling in js
//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;
权限组件使用示例:
<template> <p> </p> <h1 id="page">page1</h1> <button>添加</button> <button>修改</button> <button>删除</button> </template>
全局注册组件
// 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!

JavaScript runs in browsers and Node.js environments and relies on the JavaScript engine to parse and execute code. 1) Generate abstract syntax tree (AST) in the parsing stage; 2) convert AST into bytecode or machine code in the compilation stage; 3) execute the compiled code in the execution stage.

The future trends of Python and JavaScript include: 1. Python will consolidate its position in the fields of scientific computing and AI, 2. JavaScript will promote the development of web technology, 3. Cross-platform development will become a hot topic, and 4. Performance optimization will be the focus. Both will continue to expand application scenarios in their respective fields and make more breakthroughs in performance.

Both Python and JavaScript's choices in development environments are important. 1) Python's development environment includes PyCharm, JupyterNotebook and Anaconda, which are suitable for data science and rapid prototyping. 2) The development environment of JavaScript includes Node.js, VSCode and Webpack, which are suitable for front-end and back-end development. Choosing the right tools according to project needs can improve development efficiency and project success rate.

Yes, the engine core of JavaScript is written in C. 1) The C language provides efficient performance and underlying control, which is suitable for the development of JavaScript engine. 2) Taking the V8 engine as an example, its core is written in C, combining the efficiency and object-oriented characteristics of C. 3) The working principle of the JavaScript engine includes parsing, compiling and execution, and the C language plays a key role in these processes.

JavaScript is at the heart of modern websites because it enhances the interactivity and dynamicity of web pages. 1) It allows to change content without refreshing the page, 2) manipulate web pages through DOMAPI, 3) support complex interactive effects such as animation and drag-and-drop, 4) optimize performance and best practices to improve user experience.

C and JavaScript achieve interoperability through WebAssembly. 1) C code is compiled into WebAssembly module and introduced into JavaScript environment to enhance computing power. 2) In game development, C handles physics engines and graphics rendering, and JavaScript is responsible for game logic and user interface.

JavaScript is widely used in websites, mobile applications, desktop applications and server-side programming. 1) In website development, JavaScript operates DOM together with HTML and CSS to achieve dynamic effects and supports frameworks such as jQuery and React. 2) Through ReactNative and Ionic, JavaScript is used to develop cross-platform mobile applications. 3) The Electron framework enables JavaScript to build desktop applications. 4) Node.js allows JavaScript to run on the server side and supports high concurrent requests.

Python is more suitable for data science and automation, while JavaScript is more suitable for front-end and full-stack development. 1. Python performs well in data science and machine learning, using libraries such as NumPy and Pandas for data processing and modeling. 2. Python is concise and efficient in automation and scripting. 3. JavaScript is indispensable in front-end development and is used to build dynamic web pages and single-page applications. 4. JavaScript plays a role in back-end development through Node.js and supports full-stack development.


Hot AI Tools

Undresser.AI Undress
AI-powered app for creating realistic nude photos

AI Clothes Remover
Online AI tool for removing clothes from photos.

Undress AI Tool
Undress images for free

Clothoff.io
AI clothes remover

Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Article

Hot Tools

WebStorm Mac version
Useful JavaScript development tools

MantisBT
Mantis is an easy-to-deploy web-based defect tracking tool designed to aid in product defect tracking. It requires PHP, MySQL and a web server. Check out our demo and hosting services.

ZendStudio 13.5.1 Mac
Powerful PHP integrated development environment

SublimeText3 Chinese version
Chinese version, very easy to use

PhpStorm Mac version
The latest (2018.2.1) professional PHP integrated development tool
