search
HomeWeb Front-endJS TutorialDetailed 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

Error handling pages, no permission control pages, etc., while permission routes are obtained from the server. The server issues corresponding routing data according to the user's permissions. The client To use these data to dynamically generate and add routes, this article adopts the second method.

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;

After getting the routing data, we mainly perform two parts of the operation. The first part is to traverse the data and load it asynchronously using components Method, load the components corresponding to each routing node, and then use

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.

It is important to note that if the 404 page is a static route, then when you enter the page for the first time, the dynamic route has not been loaded yet, and if the

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,

add the user operation permission list, and then register the global command, when the node When rendering for the first time, determine whether the page has permissions. If it exists and the parameters passed in are not in the permissions list, delete the node directly.

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中文网其它相关文章!

推荐阅读:

分享页面后跳转回首页

Vue自定义动态组件使用详解

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!

Statement
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Behind the Scenes: What Language Powers JavaScript?Behind the Scenes: What Language Powers JavaScript?Apr 28, 2025 am 12:01 AM

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 of Python and JavaScript: Trends and PredictionsThe Future of Python and JavaScript: Trends and PredictionsApr 27, 2025 am 12:21 AM

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.

Python vs. JavaScript: Development Environments and ToolsPython vs. JavaScript: Development Environments and ToolsApr 26, 2025 am 12:09 AM

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.

Is JavaScript Written in C? Examining the EvidenceIs JavaScript Written in C? Examining the EvidenceApr 25, 2025 am 12:15 AM

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's Role: Making the Web Interactive and DynamicJavaScript's Role: Making the Web Interactive and DynamicApr 24, 2025 am 12:12 AM

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: The Connection ExplainedC and JavaScript: The Connection ExplainedApr 23, 2025 am 12:07 AM

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.

From Websites to Apps: The Diverse Applications of JavaScriptFrom Websites to Apps: The Diverse Applications of JavaScriptApr 22, 2025 am 12:02 AM

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 vs. JavaScript: Use Cases and Applications ComparedPython vs. JavaScript: Use Cases and Applications ComparedApr 21, 2025 am 12:01 AM

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.

See all articles

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

Video Face Swap

Video Face Swap

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

Hot Tools

WebStorm Mac version

WebStorm Mac version

Useful JavaScript development tools

MantisBT

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

ZendStudio 13.5.1 Mac

Powerful PHP integrated development environment

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

PhpStorm Mac version

PhpStorm Mac version

The latest (2018.2.1) professional PHP integrated development tool