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

Posted 2020-11-23 provedl

   附上：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 })