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

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     )

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

 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

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