Detailed explanation of vue iview dynamic routing and permission verification steps-JS Tutorial-php.cn

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;
 }
};

Copy after login

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;
}

Copy after login

Finally in main. Calling in js

//main.js
 mounted () {
 // 调用方法，动态生成路由
 util.initRouter(this);
 }

Copy after login

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"]
  },
  ...
 ]
 }
]

Copy after login

在遍历生成路由节点时，将 permission 字段数据存入路由节点 meta 属性中

//util.js
//生成路由节点
util.initRouterNode = function (routers, data) {
 for (var item of data) {
  ....
  //添加权限判断
  meta.permission = menu.permission ? menu.permission : null;
  ...
 }
};

Copy after login

定义全局命令组件，读取路由 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;

Copy after login

权限组件使用示例：

<template>
 <p>
  <h1>page1</h1>
  <Button v-hasPermission="&#39;add&#39;">添加</Button>
  <Button v-hasPermission="&#39;edit&#39;">修改</Button>
  <Button v-hasPermission="&#39;del&#39;">删除</Button>
 </p>
</template>

Copy after login

全局注册组件

// main.js
import hasPermission from '@/libs/hasPermission.js';
Vue.use(hasPermission);

Copy after login

这种权限控制方法的优点就是，不管是管理配置还是页面处理逻辑都相对简单，没有很多重复的代码判断和节点处理，在参考对比了网上几种实现方式后，个人比较推荐这一种方法。

页面标签和面包屑导航

在我看来，页面标签和面包屑都属于系统中锦上添花的页面相关控件，提高页面管理的便捷性，在iview官方admin项目中已经实现了这两个组件。所以这个项目中，只是将其进行移植，实现了组件功能，没有深入了解，感兴趣的可以仔细研究。

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！