Skip to content

Commit 6bc4258

Browse files
committed
fix(view): vue 动态添加路由
1 parent e788e0f commit 6bc4258

File tree

6 files changed

+301
-5
lines changed

6 files changed

+301
-5
lines changed

admin/src/permission.js

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,14 @@
11
import router from './router'
2+
import { routeManage, routerAdmin } from './router'
23
import store from './store'
34
import NProgress from 'nprogress' // Progress 进度条
45
import 'nprogress/nprogress.css'// Progress 进度条样式
56
import { Message } from 'element-ui'
67
import { getToken } from '@/utils/auth' // 验权
78

9+
console.log(router)
10+
router.addRoutes(routerAdmin)
11+
router.addRoutes(routeManage)
812
const whiteList = ['/login', '/index', '/line', '/home', '/404', '/', '', '/md'] // 不重定向白名单
913
router.beforeEach((to, from, next) => {
1014
NProgress.start()
@@ -15,6 +19,11 @@ router.beforeEach((to, from, next) => {
1519
} else {
1620
if (store.getters.roles.length === 0) {
1721
store.dispatch('GetInfo').then(res => { // 拉取用户信息
22+
const roles = res.data.roles
23+
store.dispatch('GenerateRoutes', { roles }).then(() => { // 根据roles权限生成可访问的路由表
24+
router.addRoutes(store.getters.addRouters) // 动态添加可访问路由表
25+
next({ ...to, replace: true }) // hack方法 确保addRoutes已完成 ,set the replace: true so the navigation will not leave a history record
26+
})
1827
if (!to.meta.role || res.data.roles.indexOf('Super Administrator') >= 0 || res.data.roles.indexOf(to.meta.role) >= 0) {
1928
next()
2029
} else {

admin/src/router/index.js

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -49,7 +49,7 @@ const routeBase = [
4949
]
5050

5151
// 管理一般路由
52-
const routeManage = [
52+
export const routeManage = [
5353
{
5454
path: '/api_excel',
5555
component: Layout,
@@ -82,7 +82,7 @@ const routeManage = [
8282
}
8383
]
8484

85-
const routerAdmin = [
85+
export const routerAdmin = [
8686
// { path: '/', redirect: '/index', hidden: true },
8787

8888
{
@@ -294,7 +294,7 @@ const routeOther = [
294294
{ path: '*', redirect: '/404', hidden: true }
295295
]
296296

297-
export const constantRouterMap = [...routeBase, ...routeManage, ...routerAdmin, ...routeOther]
297+
export const constantRouterMap = [...routeBase, ...routeOther]
298298

299299
export default new Router({
300300
// mode: 'history', //后端支持可开

admin/src/router/router.js

Lines changed: 263 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,263 @@
1+
/* Layout */
2+
const Layout = () => import('../views/layout/Layout')
3+
4+
/**
5+
* hidden: true if `hidden:true` will not show in the sidebar(default is false)
6+
* alwaysShow: true if set true, will always show the root menu, whatever its child routes length
7+
* if not set alwaysShow, only more than one route under the children
8+
* it will becomes nested mode, otherwise not show the root menu
9+
* redirect: noredirect if `redirect:noredirect` will no redirect in the breadcrumb
10+
* name:'router-name' the name is used by <keep-alive> (must set!!!)
11+
* meta : {
12+
title: 'title' the name show in submenu and breadcrumb (recommend set)
13+
icon: 'svg-name' the icon show in the sidebar,
14+
}
15+
**/
16+
const Super = 'Super Administrator'
17+
const Admin = 'Admin'
18+
19+
// 管理一般路由
20+
export const routeManage = [
21+
{
22+
path: '/api_excel',
23+
component: Layout,
24+
redirect: '/api_excel/index',
25+
name: 'Excel-List',
26+
meta: { title: '批量测试管理', icon: 'ico-table', role: Admin },
27+
children: [
28+
{ path: '/api_excel/edit/:id', name: 'EditExcel', component: () => import('@/views/api_excel/edit'), hidden: true },
29+
{
30+
path: '/api_excel/add',
31+
name: 'AddExcel',
32+
component: () => import('@/views/api_excel/add'),
33+
meta: { title: '上传测试', icon: 'excel', role: Admin }
34+
},
35+
{
36+
path: '/api_excel/index',
37+
name: 'Excel',
38+
component: () => import('@/views/api_excel/index'),
39+
meta: { title: '测试管理', icon: 'ico-aliyun', role: Admin }
40+
},
41+
{ path: '/api_param/add', name: 'AddApiParam', component: () => import('@/views/api_param/add'), hidden: true },
42+
{ path: '/api_param/edit/:id', name: 'EditApiParam', component: () => import('@/views/api_param/edit'), hidden: true },
43+
{
44+
path: '/api_param/index',
45+
name: 'ApiParam',
46+
component: () => import('@/views/api_param/index'),
47+
meta: { title: '接口列表', icon: 'api', role: Admin }
48+
}
49+
]
50+
}
51+
]
52+
53+
export const routerAdmin = [
54+
// { path: '/', redirect: '/index', hidden: true },
55+
56+
{
57+
path: '/category',
58+
component: Layout,
59+
redirect: '/category/index',
60+
name: 'Category-Nav',
61+
meta: { title: '栏目菜单', icon: 'category', role: Super },
62+
children: [
63+
{ path: '/category/add', name: 'AddCategory', component: () => import('@/views/category/add'), meta: { title: '添加栏目' }, hidden: true },
64+
{ path: '/category/edit/:id', name: 'EditCategory', component: () => import('@/views/category/edit'), hidden: true },
65+
{
66+
path: '/category/index',
67+
name: 'Category',
68+
component: () => import('@/views/category/index'),
69+
meta: { title: '栏目管理', icon: 'ico-category', role: Super }
70+
},
71+
{ path: '/nav/add', name: 'AddNav', component: () => import('@/views/nav/add'), hidden: true },
72+
{ path: '/nav/edit/:id', name: 'EditNav', component: () => import('@/views/nav/edit'), hidden: true },
73+
{
74+
path: '/nav',
75+
name: 'Nav',
76+
component: () => import('@/views/nav'),
77+
meta: { title: '导航管理', icon: 'nav', role: Super }
78+
},
79+
{ path: '/tag/add', name: 'AddTag', component: () => import('@/views/tag/add'), meta: { title: '添加标签' }, hidden: true },
80+
{ path: '/tag/edit/:id', name: 'EditTag', component: () => import('@/views/tag/edit'), hidden: true },
81+
{
82+
path: '/tag',
83+
name: 'Tag',
84+
component: () => import('@/views/tag/index'),
85+
meta: { title: '标签列表', icon: 'tag', role: Super }
86+
}
87+
]
88+
},
89+
90+
{
91+
path: '/article',
92+
component: Layout,
93+
// redirect: '/article',
94+
name: 'Article-List',
95+
meta: { title: '文章管理', icon: 'article', role: Super },
96+
children: [
97+
{ path: '/article/edit/:id', name: 'EditArticle', component: () => import('@/views/article/edit'), hidden: true },
98+
{
99+
path: '/article/index',
100+
name: 'Article',
101+
component: () => import('@/views/article/index'),
102+
meta: { title: '文章管理', icon: 'ico-article', role: Super }
103+
},
104+
{
105+
path: '/article/add',
106+
name: 'AddArticle',
107+
component: () => import('@/views/article/add'),
108+
meta: { title: '添加文章', icon: 'add', role: Super }
109+
}
110+
]
111+
},
112+
113+
{
114+
path: '/list',
115+
component: Layout,
116+
redirect: '/task',
117+
name: '公交',
118+
meta: { title: '公交管理', icon: 'bus', role: Super },
119+
children: [
120+
{ path: '/task/search', name: 'search', component: () => import('@/views/task/search'), hidden: true },
121+
{ path: '/task/newBus', name: 'NewBus', component: () => import('@/views/task/newBus'), hidden: true },
122+
{ path: '/task/edit/:id', name: 'taskEdit', component: () => import('@/views/task/edit'), hidden: true },
123+
{
124+
path: '/task',
125+
name: '定时任务',
126+
component: () => import('@/views/task/index'),
127+
meta: { title: '定时任务', icon: 'task', role: Super }
128+
},
129+
{ path: 'lines/add', name: 'linesAdd', component: () => import('@/views/lines/add'), hidden: true },
130+
{ path: 'lines/edit/:id', name: 'linesEdit', component: () => import('@/views/lines/edit'), hidden: true },
131+
{
132+
path: 'lines',
133+
name: '公交列表',
134+
component: () => import('@/views/lines/index'),
135+
meta: { title: '公交列表', icon: 'table', role: Super }
136+
},
137+
{
138+
path: 'config',
139+
name: '配置管理',
140+
component: () => import('@/views/lines/index'),
141+
meta: { title: '配置列表', icon: 'table', role: Super }
142+
},
143+
{
144+
path: 'tree',
145+
name: 'Tree',
146+
component: () => import('@/views/tree/index'),
147+
meta: { title: 'Tree', icon: 'tree', role: Super },
148+
hidden: true
149+
}
150+
]
151+
},
152+
153+
{
154+
path: 'user',
155+
component: Layout,
156+
redirect: '/user',
157+
name: '权限',
158+
meta: { title: '权限管理', icon: 'auth', role: Super },
159+
children: [
160+
{ path: 'index', name: 'userIndex', component: () => import('@/views/user/index'), hidden: true },
161+
{ path: 'password', name: 'userPassword', component: () => import('@/views/user/password'), hidden: true },
162+
{ path: '/user/add', name: 'AddUser', component: () => import('@/views/user/add'), hidden: true },
163+
{ path: '/user/edit/:id', name: 'EditUser', component: () => import('@/views/user/edit'), hidden: true },
164+
{
165+
path: '/user',
166+
name: '用户管理',
167+
component: () => import('@/views/user/index'),
168+
meta: { title: '用户列表', icon: 'user', role: Super }
169+
},
170+
{ path: '/permission/add', name: 'AddPermission', component: () => import('@/views/permission/add'), hidden: true },
171+
{ path: '/permission/edit/:id', name: 'EditPermission', component: () => import('@/views/permission/edit'), hidden: true },
172+
{
173+
path: '/permission',
174+
name: '权限列表',
175+
component: () => import('@/views/permission/index'),
176+
meta: { title: '权限列表', icon: 'permission', role: Super }
177+
},
178+
179+
{ path: '/role/add', name: 'AddRole', component: () => import('@/views/role/add'), hidden: true },
180+
{ path: '/role/edit/:id', name: 'EditRole', component: () => import('@/views/role/edit'), hidden: true },
181+
{
182+
path: '/role',
183+
name: '角色管理',
184+
component: () => import('@/views/role/index'),
185+
meta: { title: '角色管理', icon: 'role', role: Super }
186+
}
187+
]
188+
}
189+
190+
]
191+
192+
export const routeOther = [
193+
{
194+
path: '/form',
195+
component: Layout,
196+
children: [
197+
{
198+
path: 'index',
199+
name: 'Form',
200+
component: () => import('@/views/form/index'),
201+
meta: { title: 'Form', icon: 'form' }
202+
}
203+
], hidden: true
204+
},
205+
{
206+
path: '/nested',
207+
component: Layout,
208+
redirect: '/nested/menu1',
209+
name: 'Nested',
210+
meta: {
211+
title: 'Nested',
212+
icon: 'nested'
213+
},
214+
children: [
215+
{
216+
path: 'menu1',
217+
component: () => import('@/views/nested/menu1/index'), // Parent router-view
218+
name: 'Menu1',
219+
meta: { title: 'Menu1' },
220+
children: [
221+
{
222+
path: 'menu1-1',
223+
component: () => import('@/views/nested/menu1/menu1-1'),
224+
name: 'Menu1-1',
225+
meta: { title: 'Menu1-1' }
226+
},
227+
{
228+
path: 'menu1-2',
229+
component: () => import('@/views/nested/menu1/menu1-2'),
230+
name: 'Menu1-2',
231+
meta: { title: 'Menu1-2' },
232+
children: [
233+
{
234+
path: 'menu1-2-1',
235+
component: () => import('@/views/nested/menu1/menu1-2/menu1-2-1'),
236+
name: 'Menu1-2-1',
237+
meta: { title: 'Menu1-2-1' }
238+
},
239+
{
240+
path: 'menu1-2-2',
241+
component: () => import('@/views/nested/menu1/menu1-2/menu1-2-2'),
242+
name: 'Menu1-2-2',
243+
meta: { title: 'Menu1-2-2' }
244+
}
245+
]
246+
},
247+
{
248+
path: 'menu1-3',
249+
component: () => import('@/views/nested/menu1/menu1-3'),
250+
name: 'Menu1-3',
251+
meta: { title: 'Menu1-3' }
252+
}
253+
]
254+
},
255+
{
256+
path: 'menu2',
257+
component: () => import('@/views/nested/menu2/index'),
258+
meta: { title: 'menu2' }
259+
}
260+
]
261+
},
262+
{ path: '*', redirect: '/404', hidden: true }
263+
]

admin/src/store/getters.js

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,8 @@ const getters = {
44
token: state => state.user.token,
55
avatar: state => state.user.avatar,
66
name: state => state.user.name,
7-
roles: state => state.user.roles
7+
roles: state => state.user.roles,
8+
// permission_routers: state => state.user.routers,
9+
addRouters: state => state.user.addRouters
810
}
911
export default getters

admin/src/store/modules/user.js

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import { login, logout, getInfo } from '@/api/login'
22
import { getToken, setToken, removeToken } from '@/utils/auth'
3+
import { routeManage, routerAdmin, routeOther } from '../../router/router'
34

45
const user = {
56
state: {
@@ -21,6 +22,9 @@ const user = {
2122
},
2223
SET_ROLES: (state, roles) => {
2324
state.roles = roles
25+
},
26+
SET_ROUTERS: (state, routers) => {
27+
state.addRouters = routers
2428
}
2529
},
2630

@@ -80,6 +84,23 @@ const user = {
8084
removeToken()
8185
resolve()
8286
})
87+
},
88+
89+
GenerateRoutes({ commit }, data) {
90+
return new Promise(resolve => {
91+
let userLimitRouters = null
92+
console.log(data)
93+
if (data.roles.indexOf('Super Administrator') >= 0) {
94+
console.log('SuperAdmin')
95+
userLimitRouters = [...routerAdmin, ...routeManage, ...routeOther]
96+
} else if (data.roles.indexOf('Admin') >= 0) {
97+
userLimitRouters = routeManage
98+
} else {
99+
userLimitRouters = routeOther
100+
}
101+
commit('SET_ROUTERS', userLimitRouters)
102+
resolve()
103+
})
83104
}
84105
}
85106
}

admin/src/views/layout/components/Sidebar/index.vue

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,8 @@ export default {
2525
'sidebar'
2626
]),
2727
routes() {
28-
return this.$router.options.routes
28+
// return this.$router.options.routes
29+
return this.$store.state.user.addRouters
2930
},
3031
isCollapse() {
3132
return !this.sidebar.opened

0 commit comments

Comments
 (0)