使用 vue-element-admin 动态路由渲染

Posted provedl

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了使用 vue-element-admin 动态路由渲染相关的知识,希望对你有一定的参考价值。

   附上:vue-element-admin 官方文档 vue-element-admin https://panjiachen.github.io/vue-element-admin-site/zh/guide/

   大佬写的权限发现在自己公司上面用并不好使做了点修改费了老大劲 

    1,首先数据库表结构为

1 CREATE TABLE [dbo].[QD_Router](
2     Id INT IDENTITY(1,1) NOT NULL,--唯一id
3     SySCName NVARCHAR](50) NULL,--菜单中文名称
4     name NVARCHAR(50) NULL ,--菜单英文名称
5     SysLayer INT NULL,--菜单等级
6     SysUpId INT NULL,--菜单上级id
7     )

 

  2,需要修改srcstoremodulesuser.js 下GetInfo方法

 1  GetInfo({ commit, state }) {
 2       return new Promise((resolve, reject) => {
 3         QueryUserRole().then(response => {
 4           console.log(response)
 5         
 6           resolve(response)
 7         }).catch(error => {
 8           reject(error)
 9         })
10       })
11     },

 3. 新建dynamicRoutes.js:该文件中定义需要根据用户权限动态挂载显示的路由

 1 import Layout from ‘@/layout‘
 2 /**
 3  * 动态路由,需要根据用户权限动态挂载
 4  */
 5 const DynamicRoutes = [
 6   {
 7     path: ‘/system‘,
 8     component: Layout,
 9     redirect: ‘/system/user‘,
10     name: ‘System‘,
11     meta: {
12       title: ‘系统管理‘,
13       icon: ‘example‘,
14       permission: ‘MENU_SYSTEM‘
15     },
16     children: [
17       {
18         path: ‘user‘,
19         name: ‘User‘,
20         component: () => import(‘@/views/system/user/index‘),
21         meta: {
22           title: ‘用户管理‘,
23           icon: ‘table‘,
24           permission: ‘MENU_SYSTEM_USER‘
25         }
26       },
27       {
28         path: ‘role‘,
29         name: ‘Role‘,
30         component: () => import(‘@/views/system/role/index‘),
31         meta: {
32           title: ‘角色管理‘,
33           icon: ‘table‘,
34           permission: ‘MENU_SYSTEM_ROLE‘
35         }
36       },
37       {
38         path: ‘dict‘,
39         name: ‘Dict‘,
40         component: () => import(‘@/views/system/dict/index‘),
41         meta: {
42           title: ‘字典管理‘,
43           icon: ‘table‘,
44           permission: ‘MENU_SYSTEM_DICT‘
45         }
46       }
47     ]
48   },
49 ]
50 
51 export default DynamicRoutes

4,permission.js:该文件用于路由跳转前的权限校验,如:token校验、获取用户信息生成用户动态菜单等

       

 1 import router from ‘./router‘
 2 import store from ‘./store‘
 3 import NProgress from ‘nprogress‘ // progress bar
 4 import ‘nprogress/nprogress.css‘ // progress bar style
 5 import { Message } from ‘element-ui‘
 6 import { getToken } from ‘@/utils/auth‘ // getToken from cookie
 7 import { loginCheck } from "@/api/login";
 8 import asyncRouterMap from ‘./router/dynamicRoutes‘
 9 
10 
11 NProgress.configure({ showSpinner: false })// NProgress configuration
12 
13 
14 const whiteList = [‘/login‘] // 不重定向白名单
15 
16 
17 //将后台传输的数据与当前路由对比生成用户所属路由
18 export function recursionRouter(userRouter = [], allRouter = []) {
19   var realRoutes = []
20   allRouter.forEach((v) => {
21 
22     userRouter.forEach((item) => {
23       if (v.name == item.name) {
24 
25         v.children = recursionRouter(item.SysLayer, v.children)
26         realRoutes.push(v)
27 
28       }
29     })
30   })
31 
32   return realRoutes
33 }
34 //获取后台传输过来的用户权限
35 export function arrayToTree(arr, SysUpId) {
36   let temp = [];
37   let treeArr = arr;
38   treeArr.forEach((item, index) => {
39     if (item.SysUpId == SysUpId) {
40       if (arrayToTree(treeArr, treeArr[index].Id).length > 0) {
41         treeArr[index].SysLayer = arrayToTree(treeArr, treeArr[index].Id);
42       }
43       temp.push(treeArr[index]);
44     }
45   });
46   return temp;
47 }
48 router.beforeEach((to, from, next) => {
49   NProgress.start()
50   if (getToken()) {
51     if (to.path === ‘/login‘) {
52       next({ path: ‘/‘ })
53       NProgress.done() /
54     } else {
55       if (store.getters.roles.length === 0) {
56         store.dispatch(‘GetInfo‘).then(res => {    
57          let Hroel = arrayToTree(res,0)
58          let newRole =  recursionRouter(Hroel,asyncRouterMap)
59          router.addRoutes(newRole)
60          router.options.routes = newRole
61           //在每次刷新时校验token是否过期
62           loginCheck(getToken()).then(result => {
63             if (result.code != 200) {
64               store.dispatch(‘FedLogOut‘).then(() => {
65                 Message.error(err || ‘登录失效请重新登录‘)
66                 next({ path: ‘/‘ })
67               })
68             }
69           })
70           next()
71         }).catch((err) => {
72           store.dispatch(‘FedLogOut‘).then(() => {
73             Message.error(err || ‘登录失效请重新登录‘)
74             next({ path: ‘/‘ })
75           })
76         })
77       } else {
78         next()
79       }
80     }
81   } else {
82     if (whiteList.indexOf(to.path) !== -1) {
83       next()
84     } else {
85       next(`/login?redirect=${to.path}`) // 否则全部重定向到登录页
86       NProgress.done()
87     }
88   }
89 })
90 router.afterEach(() => {
91   NProgress.done() // 结束Progress
92 })

 

 

     

 

以上是关于使用 vue-element-admin 动态路由渲染的主要内容,如果未能解决你的问题,请参考以下文章

vue-element-admin 登出切换用户后重新登录跳转404页面Bug-解决记录

vue-element-admin--使用体验

基于 vue-element-admin 的项目总结

编程日志 Vue-element-admin

vue-element-admin 三级路由

Vue-element-admin用户鉴权管理(路由+按钮级别)