feat dynamic routes
This commit is contained in:
Serge Gao
parent
0fed69f367
commit
a7ccc6078b
|
|
@ -0,0 +1,8 @@
|
|||
import request from '@/utils/request'
|
||||
|
||||
export function fetchAsyncRoutes() {
|
||||
return request({
|
||||
url: '/routes',
|
||||
method: 'get'
|
||||
})
|
||||
}
|
||||
|
|
@ -3,6 +3,7 @@ import loginAPI from './login'
|
|||
import articleAPI from './article'
|
||||
import remoteSearchAPI from './remoteSearch'
|
||||
import transactionAPI from './transaction'
|
||||
import routesAPI from './routes'
|
||||
|
||||
// 修复在使用 MockJS 情况下，设置 withCredentials = true，且未被拦截的跨域请求丢失 Cookies 的问题
|
||||
// https://github.com/nuysoft/Mock/issues/300
|
||||
|
|
@ -18,6 +19,9 @@ Mock.XHR.prototype.send = function() {
|
|||
// timeout: '350-600'
|
||||
// })
|
||||
|
||||
// 路由表相关
|
||||
Mock.mock(/\/routes/, 'get', routesAPI.getAsyncRoutesMap)
|
||||
|
||||
// 登录相关
|
||||
Mock.mock(/\/login\/login/, 'post', loginAPI.loginByUsername)
|
||||
Mock.mock(/\/login\/logout/, 'post', loginAPI.logout)
|
||||
|
|
|
|||
|
|
@ -0,0 +1,570 @@
|
|||
const asyncRoutesMap = [
|
||||
{
|
||||
id: '1',
|
||||
path: '/permission',
|
||||
component: 'layout/Layout',
|
||||
redirect: '/permission/index',
|
||||
alwaysShow: true, // will always show the root menu
|
||||
meta: {
|
||||
title: 'permission',
|
||||
icon: 'lock',
|
||||
roles: ['admin', 'editor'] // you can set roles in root nav
|
||||
},
|
||||
children: [
|
||||
{
|
||||
id: '2',
|
||||
path: 'page',
|
||||
component: 'permission/page',
|
||||
name: 'PagePermission',
|
||||
meta: {
|
||||
title: 'pagePermission',
|
||||
roles: ['admin']
|
||||
}
|
||||
},
|
||||
{
|
||||
id: '3',
|
||||
path: 'directive',
|
||||
component: 'permission/directive',
|
||||
name: 'DirectivePermission',
|
||||
meta: {
|
||||
title: 'directivePermission',
|
||||
roles: ['admin', 'editor']
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
|
||||
{
|
||||
id: '4',
|
||||
path: '/icon',
|
||||
component: 'layout/Layout',
|
||||
children: [
|
||||
{
|
||||
id: '5',
|
||||
path: 'index',
|
||||
component: 'svg-icons/index',
|
||||
name: 'Icons',
|
||||
meta: { title: 'icons', icon: 'icon', noCache: true, roles: ['admin', 'editor'] }
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
id: '6',
|
||||
path: '/components',
|
||||
component: 'layout/Layout',
|
||||
redirect: 'noredirect',
|
||||
name: 'ComponentDemo',
|
||||
meta: {
|
||||
title: 'components',
|
||||
icon: 'component',
|
||||
roles: ['admin', 'editor']
|
||||
},
|
||||
children: [
|
||||
{
|
||||
id: '7',
|
||||
path: 'tinymce',
|
||||
component: 'components-demo/tinymce',
|
||||
name: 'TinymceDemo',
|
||||
meta: { title: 'tinymce', roles: ['admin', 'editor'] }
|
||||
},
|
||||
{
|
||||
id: '8',
|
||||
path: 'markdown',
|
||||
component: 'components-demo/markdown',
|
||||
name: 'MarkdownDemo',
|
||||
meta: { title: 'markdown', roles: ['admin', 'editor'] }
|
||||
},
|
||||
{
|
||||
id: '9',
|
||||
path: 'json-editor',
|
||||
component: 'components-demo/jsonEditor',
|
||||
name: 'JsonEditorDemo',
|
||||
meta: { title: 'jsonEditor', roles: ['admin', 'editor'] }
|
||||
},
|
||||
{
|
||||
id: '10',
|
||||
path: 'splitpane',
|
||||
component: 'components-demo/splitpane',
|
||||
name: 'SplitpaneDemo',
|
||||
meta: { title: 'splitPane', roles: ['admin', 'editor'] }
|
||||
},
|
||||
{
|
||||
id: '11',
|
||||
path: 'avatar-upload',
|
||||
component: 'components-demo/avatarUpload',
|
||||
name: 'AvatarUploadDemo',
|
||||
meta: { title: 'avatarUpload', roles: ['admin', 'editor'] }
|
||||
},
|
||||
{
|
||||
id: '12',
|
||||
path: 'dropzone',
|
||||
component: 'components-demo/dropzone',
|
||||
name: 'DropzoneDemo',
|
||||
meta: { title: 'dropzone', roles: ['admin', 'editor'] }
|
||||
},
|
||||
{
|
||||
id: '13',
|
||||
path: 'sticky',
|
||||
component: 'components-demo/sticky',
|
||||
name: 'StickyDemo',
|
||||
meta: { title: 'sticky', roles: ['admin', 'editor'] }
|
||||
},
|
||||
{
|
||||
id: '14',
|
||||
path: 'count-to',
|
||||
component: 'components-demo/countTo',
|
||||
name: 'CountToDemo',
|
||||
meta: { title: 'countTo', roles: ['admin', 'editor'] }
|
||||
},
|
||||
{
|
||||
id: '15',
|
||||
path: 'mixin',
|
||||
component: 'components-demo/mixin',
|
||||
name: 'ComponentMixinDemo',
|
||||
meta: { title: 'componentMixin', roles: ['admin', 'editor'] }
|
||||
},
|
||||
{
|
||||
id: '16',
|
||||
path: 'back-to-top',
|
||||
component: 'components-demo/backToTop',
|
||||
name: 'BackToTopDemo',
|
||||
meta: { title: 'backToTop', roles: ['admin', 'editor'] }
|
||||
},
|
||||
{
|
||||
id: '17',
|
||||
path: 'drag-dialog',
|
||||
component: 'components-demo/dragDialog',
|
||||
name: 'DragDialogDemo',
|
||||
meta: { title: 'dragDialog', roles: ['admin', 'editor'] }
|
||||
},
|
||||
{
|
||||
id: '18',
|
||||
path: 'drag-select',
|
||||
component: 'components-demo/dragSelect',
|
||||
name: 'DragSelectDemo',
|
||||
meta: { title: 'dragSelect', roles: ['admin', 'editor'] }
|
||||
},
|
||||
{
|
||||
id: '19',
|
||||
path: 'dnd-list',
|
||||
component: 'components-demo/dndList',
|
||||
name: 'DndListDemo',
|
||||
meta: { title: 'dndList', roles: ['admin', 'editor'] }
|
||||
},
|
||||
{
|
||||
id: '20',
|
||||
path: 'drag-kanban',
|
||||
component: 'components-demo/dragKanban',
|
||||
name: 'DragKanbanDemo',
|
||||
meta: { title: 'dragKanban', roles: ['admin', 'editor'] }
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
id: '21',
|
||||
path: '/charts',
|
||||
component: 'layout/Layout',
|
||||
redirect: 'noredirect',
|
||||
name: 'Charts',
|
||||
meta: {
|
||||
title: 'charts',
|
||||
icon: 'chart',
|
||||
roles: ['admin', 'editor']
|
||||
},
|
||||
children: [
|
||||
{
|
||||
id: '22',
|
||||
path: 'keyboard',
|
||||
component: 'charts/keyboard',
|
||||
name: 'KeyboardChart',
|
||||
meta: { title: 'keyboardChart', noCache: true, roles: ['admin', 'editor'] }
|
||||
},
|
||||
{
|
||||
id: '23',
|
||||
path: 'line',
|
||||
component: 'charts/line',
|
||||
name: 'LineChart',
|
||||
meta: { title: 'lineChart', noCache: true, roles: ['admin', 'editor'] }
|
||||
},
|
||||
{
|
||||
id: '24',
|
||||
path: 'mixchart',
|
||||
component: 'charts/mixChart',
|
||||
name: 'MixChart',
|
||||
meta: { title: 'mixChart', noCache: true, roles: ['admin', 'editor'] }
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
id: '25',
|
||||
path: '/nested',
|
||||
component: 'layout/Layout',
|
||||
redirect: '/nested/menu1/menu1-1',
|
||||
name: 'Nested',
|
||||
meta: {
|
||||
title: 'nested',
|
||||
icon: 'nested',
|
||||
roles: ['admin', 'editor']
|
||||
},
|
||||
children: [
|
||||
{
|
||||
id: '26',
|
||||
path: 'menu1',
|
||||
component: 'nested/menu1/index', // Parent router-view
|
||||
name: 'Menu1',
|
||||
meta: { title: 'menu1', roles: ['admin', 'editor'] },
|
||||
redirect: '/nested/menu1/menu1-1',
|
||||
children: [
|
||||
{
|
||||
id: '27',
|
||||
path: 'menu1-1',
|
||||
component: 'nested/menu1/menu1-1',
|
||||
name: 'Menu1-1',
|
||||
meta: { title: 'menu1-1', roles: ['admin', 'editor'] }
|
||||
},
|
||||
{
|
||||
id: '28',
|
||||
path: 'menu1-2',
|
||||
component: 'nested/menu1/menu1-2',
|
||||
name: 'Menu1-2',
|
||||
redirect: '/nested/menu1/menu1-2/menu1-2-1',
|
||||
meta: { title: 'menu1-2', roles: ['admin', 'editor'] },
|
||||
children: [
|
||||
{
|
||||
id: '29',
|
||||
path: 'menu1-2-1',
|
||||
component: 'nested/menu1/menu1-2/menu1-2-1',
|
||||
name: 'Menu1-2-1',
|
||||
meta: { title: 'menu1-2-1', roles: ['admin', 'editor'] }
|
||||
},
|
||||
{
|
||||
id: '30',
|
||||
path: 'menu1-2-2',
|
||||
component: 'nested/menu1/menu1-2/menu1-2-2',
|
||||
name: 'Menu1-2-2',
|
||||
meta: { title: 'menu1-2-2', roles: ['admin', 'editor'] }
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
id: '31',
|
||||
path: 'menu1-3',
|
||||
component: 'nested/menu1/menu1-3',
|
||||
name: 'Menu1-3',
|
||||
meta: { title: 'menu1-3', roles: ['admin', 'editor'] }
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
id: '32',
|
||||
path: 'menu2',
|
||||
name: 'Menu2',
|
||||
component: 'nested/menu2/index',
|
||||
meta: { title: 'menu2', roles: ['admin', 'editor'] }
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
id: '33',
|
||||
path: '/table',
|
||||
component: 'layout/Layout',
|
||||
redirect: '/table/complex-table',
|
||||
name: 'Table',
|
||||
meta: {
|
||||
title: 'Table',
|
||||
icon: 'table',
|
||||
roles: ['admin', 'editor']
|
||||
},
|
||||
children: [
|
||||
{
|
||||
id: '34',
|
||||
path: 'dynamic-table',
|
||||
component: 'table/dynamicTable/index',
|
||||
name: 'DynamicTable',
|
||||
meta: { title: 'dynamicTable', roles: ['admin', 'editor'] }
|
||||
},
|
||||
{
|
||||
id: '35',
|
||||
path: 'drag-table',
|
||||
component: 'table/dragTable',
|
||||
name: 'DragTable',
|
||||
meta: { title: 'dragTable', roles: ['admin', 'editor'] }
|
||||
},
|
||||
{
|
||||
id: '36',
|
||||
path: 'inline-edit-table',
|
||||
component: 'table/inlineEditTable',
|
||||
name: 'InlineEditTable',
|
||||
meta: { title: 'inlineEditTable', roles: ['admin', 'editor'] }
|
||||
},
|
||||
{
|
||||
id: '37',
|
||||
path: 'tree-table',
|
||||
component: 'table/treeTable/treeTable',
|
||||
name: 'TreeTableDemo',
|
||||
meta: { title: 'treeTable', roles: ['admin', 'editor'] }
|
||||
},
|
||||
{
|
||||
id: '38',
|
||||
path: 'custom-tree-table',
|
||||
component: 'table/treeTable/customTreeTable',
|
||||
name: 'CustomTreeTableDemo',
|
||||
meta: { title: 'customTreeTable', roles: ['admin', 'editor'] }
|
||||
},
|
||||
{
|
||||
id: '39',
|
||||
path: 'complex-table',
|
||||
component: 'table/complexTable',
|
||||
name: 'ComplexTable',
|
||||
meta: { title: 'complexTable', roles: ['admin', 'editor'] }
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
id: '40',
|
||||
path: '/example',
|
||||
component: 'layout/Layout',
|
||||
redirect: '/example/list',
|
||||
name: 'Example',
|
||||
meta: {
|
||||
title: 'example',
|
||||
icon: 'example',
|
||||
roles: ['admin', 'editor']
|
||||
},
|
||||
children: [
|
||||
{
|
||||
id: '41',
|
||||
path: 'create',
|
||||
component: 'example/create',
|
||||
name: 'CreateArticle',
|
||||
meta: { title: 'createArticle', icon: 'edit', roles: ['admin', 'editor'] }
|
||||
},
|
||||
{
|
||||
id: '42',
|
||||
path: 'edit/:id(\\d+)',
|
||||
component: 'example/edit',
|
||||
name: 'EditArticle',
|
||||
meta: { title: 'editArticle', noCache: true, roles: ['admin', 'editor'] },
|
||||
hidden: true
|
||||
},
|
||||
{
|
||||
id: '43',
|
||||
path: 'list',
|
||||
component: 'example/list',
|
||||
name: 'ArticleList',
|
||||
meta: { title: 'articleList', icon: 'list', roles: ['admin', 'editor'] }
|
||||
}
|
||||
]
|
||||
},
|
||||
|
||||
{
|
||||
path: '/tab',
|
||||
component: 'layout/Layout',
|
||||
children: [
|
||||
{
|
||||
id: '44',
|
||||
path: 'index',
|
||||
component: 'tab/index',
|
||||
name: 'Tab',
|
||||
meta: { title: 'tab', icon: 'tab', roles: ['admin', 'editor'] }
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
id: '45',
|
||||
path: '/error',
|
||||
component: 'layout/Layout',
|
||||
redirect: 'noredirect',
|
||||
name: 'ErrorPages',
|
||||
meta: {
|
||||
title: 'errorPages',
|
||||
icon: '404',
|
||||
roles: ['admin', 'editor']
|
||||
},
|
||||
children: [
|
||||
{
|
||||
id: '46',
|
||||
path: '401',
|
||||
component: 'errorPage/401',
|
||||
name: 'Page401',
|
||||
meta: { title: 'page401', noCache: true, roles: ['admin', 'editor'] }
|
||||
},
|
||||
{
|
||||
id: '47',
|
||||
path: '404',
|
||||
component: 'errorPage/404',
|
||||
name: 'Page404',
|
||||
meta: { title: 'page404', noCache: true, roles: ['admin', 'editor'] }
|
||||
}
|
||||
]
|
||||
},
|
||||
|
||||
{
|
||||
id: '48',
|
||||
path: '/error-log',
|
||||
component: 'layout/Layout',
|
||||
redirect: 'noredirect',
|
||||
children: [
|
||||
{
|
||||
path: 'log',
|
||||
component: 'errorLog/index',
|
||||
name: 'ErrorLog',
|
||||
meta: { title: 'errorLog', icon: 'bug', roles: ['admin', 'editor'] }
|
||||
}
|
||||
]
|
||||
},
|
||||
|
||||
{
|
||||
id: '49',
|
||||
path: '/excel',
|
||||
component: 'layout/Layout',
|
||||
redirect: '/excel/export-excel',
|
||||
name: 'Excel',
|
||||
meta: {
|
||||
title: 'excel',
|
||||
icon: 'excel',
|
||||
roles: ['admin', 'editor']
|
||||
},
|
||||
children: [
|
||||
{
|
||||
id: '50',
|
||||
path: 'export-excel',
|
||||
component: 'excel/exportExcel',
|
||||
name: 'ExportExcel',
|
||||
meta: { title: 'exportExcel', roles: ['admin', 'editor'] }
|
||||
},
|
||||
{
|
||||
id: '51',
|
||||
path: 'export-selected-excel',
|
||||
component: 'excel/selectExcel',
|
||||
name: 'SelectExcel',
|
||||
meta: { title: 'selectExcel', roles: ['admin', 'editor'] }
|
||||
},
|
||||
{
|
||||
id: '52',
|
||||
path: 'upload-excel',
|
||||
component: 'excel/uploadExcel',
|
||||
name: 'UploadExcel',
|
||||
meta: { title: 'uploadExcel', roles: ['admin', 'editor'] }
|
||||
}
|
||||
]
|
||||
},
|
||||
|
||||
// {
|
||||
// id: '53',
|
||||
// path: '/zip',
|
||||
// component: 'layout/Layout',
|
||||
// redirect: '/zip/download',
|
||||
// alwaysShow: true,
|
||||
// meta: { title: 'zip', icon: 'zip', roles: ['admin', 'editor'] },
|
||||
// children: [
|
||||
// {
|
||||
// id: '54',
|
||||
// path: 'download',
|
||||
// component: 'zip/index',
|
||||
// name: 'ExportZip',
|
||||
// meta: { title: 'exportZip', roles: ['admin', 'editor'] }
|
||||
// }
|
||||
// ]
|
||||
// },
|
||||
|
||||
{
|
||||
id: '55',
|
||||
path: '/pdf',
|
||||
component: 'layout/Layout',
|
||||
redirect: '/pdf/index',
|
||||
children: [
|
||||
{
|
||||
id: '56',
|
||||
path: 'index',
|
||||
component: 'pdf/index',
|
||||
name: 'PDF',
|
||||
meta: { title: 'pdf', icon: 'pdf', roles: ['admin', 'editor'] }
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
id: '57',
|
||||
path: '/pdf/download',
|
||||
component: 'pdf/download',
|
||||
hidden: true
|
||||
},
|
||||
|
||||
{
|
||||
id: '58',
|
||||
path: '/theme',
|
||||
component: 'layout/Layout',
|
||||
redirect: 'noredirect',
|
||||
meta: {
|
||||
roles: ['admin', 'editor']
|
||||
},
|
||||
children: [
|
||||
{
|
||||
id: '59',
|
||||
path: 'index',
|
||||
component: 'theme/index',
|
||||
name: 'Theme',
|
||||
meta: { title: 'theme', icon: 'theme', roles: ['admin', 'editor'] }
|
||||
}
|
||||
]
|
||||
},
|
||||
|
||||
{
|
||||
id: '60',
|
||||
path: '/clipboard',
|
||||
component: 'layout/Layout',
|
||||
redirect: 'noredirect',
|
||||
meta: {
|
||||
roles: ['admin', 'editor']
|
||||
},
|
||||
children: [
|
||||
{
|
||||
id: '61',
|
||||
path: 'index',
|
||||
component: 'clipboard/index',
|
||||
name: 'ClipboardDemo',
|
||||
meta: { title: 'clipboardDemo', icon: 'clipboard', roles: ['admin', 'editor'] }
|
||||
}
|
||||
]
|
||||
},
|
||||
|
||||
{
|
||||
id: '62',
|
||||
path: '/i18n',
|
||||
component: 'layout/Layout',
|
||||
meta: {
|
||||
roles: ['admin', 'editor']
|
||||
},
|
||||
children: [
|
||||
{
|
||||
id: '63',
|
||||
path: 'index',
|
||||
component: 'i18n-demo/index',
|
||||
name: 'I18n',
|
||||
meta: { title: 'i18n', icon: 'international', roles: ['admin', 'editor'] }
|
||||
}
|
||||
]
|
||||
},
|
||||
|
||||
{
|
||||
id: '64',
|
||||
path: 'external-link',
|
||||
component: 'layout/Layout',
|
||||
meta: {
|
||||
roles: ['admin', 'editor']
|
||||
},
|
||||
children: [
|
||||
{
|
||||
id: '65',
|
||||
path: 'https://github.com/PanJiaChen/vue-element-admin',
|
||||
meta: { title: 'externalLink', icon: 'link', roles: ['admin', 'editor'] }
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
|
||||
export default {
|
||||
getAsyncRoutesMap() {
|
||||
return asyncRoutesMap
|
||||
}
|
||||
}
|
||||
|
|
@ -2,41 +2,48 @@ import router from './router'
|
|||
import store from './store'
|
||||
import { Message } from 'element-ui'
|
||||
import NProgress from 'nprogress' // progress bar
|
||||
import 'nprogress/nprogress.css'// progress bar style
|
||||
import 'nprogress/nprogress.css' // progress bar style
|
||||
import { getToken } from '@/utils/auth' // getToken from cookie
|
||||
|
||||
NProgress.configure({ showSpinner: false })// NProgress Configuration
|
||||
NProgress.configure({ showSpinner: false }) // NProgress Configuration
|
||||
|
||||
// permission judge function
|
||||
function hasPermission(roles, permissionRoles) {
|
||||
if (roles.indexOf('admin') >= 0) return true // admin permission passed directly
|
||||
if (roles.findIndex(role => role === 'admin') >= 0) return true // admin permission passed directly
|
||||
if (!permissionRoles) return true
|
||||
return roles.some(role => permissionRoles.indexOf(role) >= 0)
|
||||
}
|
||||
|
||||
const whiteList = ['/login', '/auth-redirect']// no redirect whitelist
|
||||
const whiteList = ['/login', '/auth-redirect'] // no redirect whitelist
|
||||
|
||||
router.beforeEach((to, from, next) => {
|
||||
NProgress.start() // start progress bar
|
||||
if (getToken()) { // determine if there has token
|
||||
if (getToken()) {
|
||||
// determine if there has token
|
||||
/* has token*/
|
||||
if (to.path === '/login') {
|
||||
next({ path: '/' })
|
||||
NProgress.done() // if current page is dashboard will not trigger afterEach hook, so manually handle it
|
||||
} else {
|
||||
if (store.getters.roles.length === 0) { // 判断当前用户是否已拉取完user_info信息
|
||||
store.dispatch('GetUserInfo').then(res => { // 拉取user_info
|
||||
const roles = res.data.roles // note: roles must be a array! such as: ['editor','develop']
|
||||
store.dispatch('GenerateRoutes', { roles }).then(() => { // 根据roles权限生成可访问的路由表
|
||||
router.addRoutes(store.getters.addRouters) // 动态添加可访问路由表
|
||||
next({ ...to, replace: true }) // hack方法 确保addRoutes已完成 ,set the replace: true so the navigation will not leave a history record
|
||||
if (store.getters.roles.length === 0) {
|
||||
// 判断当前用户是否已拉取完user_info信息
|
||||
store
|
||||
.dispatch('GetUserInfo')
|
||||
.then(res => {
|
||||
// 拉取user_info
|
||||
const roles = res.data.roles // note: roles must be a object array! such as: [{id: '1', name: 'editor'}, {id: '2', name: 'developer'}]
|
||||
store.dispatch('GenerateRoutes', { roles }).then(excessRoutes => {
|
||||
// 根据roles权限生成可访问的路由表
|
||||
router.addRoutes(excessRoutes) // 动态添加可访问路由表
|
||||
next({ ...to, replace: true }) // hack方法 确保addRouters已完成 ,set the replace: true so the navigation will not leave a history record
|
||||
})
|
||||
})
|
||||
}).catch((err) => {
|
||||
store.dispatch('FedLogOut').then(() => {
|
||||
Message.error(err)
|
||||
next({ path: '/' })
|
||||
.catch(err => {
|
||||
store.dispatch('FedLogOut').then(() => {
|
||||
Message.error(err)
|
||||
next({ path: '/' })
|
||||
})
|
||||
})
|
||||
})
|
||||
} else {
|
||||
// 没有动态改变权限的需求可直接next() 删除下方权限判断 ↓
|
||||
if (hasPermission(store.getters.roles, to.meta.roles)) {
|
||||
|
|
@ -49,7 +56,8 @@ router.beforeEach((to, from, next) => {
|
|||
}
|
||||
} else {
|
||||
/* has no token*/
|
||||
if (whiteList.indexOf(to.path) !== -1) { // 在免登录白名单，直接进入
|
||||
if (whiteList.indexOf(to.path) !== -1) {
|
||||
// 在免登录白名单，直接进入
|
||||
next()
|
||||
} else {
|
||||
next(`/login?redirect=${to.path}`) // 否则全部重定向到登录页
|
||||
|
|
|
|||
|
|
@ -6,12 +6,6 @@ Vue.use(Router)
|
|||
/* Layout */
|
||||
import Layout from '@/views/layout/Layout'
|
||||
|
||||
/* Router Modules */
|
||||
import componentsRouter from './modules/components'
|
||||
import chartsRouter from './modules/charts'
|
||||
import tableRouter from './modules/table'
|
||||
import nestedRouter from './modules/nested'
|
||||
|
||||
/** note: Submenu only appear when children.length>=1
|
||||
* detail see https://panjiachen.github.io/vue-element-admin-site/guide/essentials/router-and-nav.html
|
||||
**/
|
||||
|
|
@ -31,7 +25,7 @@ import nestedRouter from './modules/nested'
|
|||
breadcrumb: false if false, the item will hidden in breadcrumb(default is true)
|
||||
}
|
||||
**/
|
||||
export const constantRouterMap = [
|
||||
export const constantRoutes = [
|
||||
{
|
||||
path: '/redirect',
|
||||
component: Layout,
|
||||
|
|
@ -104,265 +98,10 @@ export const constantRouterMap = [
|
|||
}
|
||||
]
|
||||
|
||||
export const generalRoutes = [{ path: '*', redirect: '/404', hidden: true }]
|
||||
|
||||
export default new Router({
|
||||
// mode: 'history', // require service support
|
||||
scrollBehavior: () => ({ y: 0 }),
|
||||
routes: constantRouterMap
|
||||
routes: constantRoutes
|
||||
})
|
||||
|
||||
export const asyncRouterMap = [
|
||||
{
|
||||
path: '/permission',
|
||||
component: Layout,
|
||||
redirect: '/permission/index',
|
||||
alwaysShow: true, // will always show the root menu
|
||||
meta: {
|
||||
title: 'permission',
|
||||
icon: 'lock',
|
||||
roles: ['admin', 'editor'] // you can set roles in root nav
|
||||
},
|
||||
children: [
|
||||
{
|
||||
path: 'page',
|
||||
component: () => import('@/views/permission/page'),
|
||||
name: 'PagePermission',
|
||||
meta: {
|
||||
title: 'pagePermission',
|
||||
roles: ['admin'] // or you can only set roles in sub nav
|
||||
}
|
||||
},
|
||||
{
|
||||
path: 'directive',
|
||||
component: () => import('@/views/permission/directive'),
|
||||
name: 'DirectivePermission',
|
||||
meta: {
|
||||
title: 'directivePermission'
|
||||
// if do not set roles, means: this page does not require permission
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
|
||||
{
|
||||
path: '/icon',
|
||||
component: Layout,
|
||||
children: [
|
||||
{
|
||||
path: 'index',
|
||||
component: () => import('@/views/svg-icons/index'),
|
||||
name: 'Icons',
|
||||
meta: { title: 'icons', icon: 'icon', noCache: true }
|
||||
}
|
||||
]
|
||||
},
|
||||
|
||||
/** When your routing table is too long, you can split it into small modules**/
|
||||
componentsRouter,
|
||||
chartsRouter,
|
||||
nestedRouter,
|
||||
tableRouter,
|
||||
|
||||
{
|
||||
path: '/example',
|
||||
component: Layout,
|
||||
redirect: '/example/list',
|
||||
name: 'Example',
|
||||
meta: {
|
||||
title: 'example',
|
||||
icon: 'example'
|
||||
},
|
||||
children: [
|
||||
{
|
||||
path: 'create',
|
||||
component: () => import('@/views/example/create'),
|
||||
name: 'CreateArticle',
|
||||
meta: { title: 'createArticle', icon: 'edit' }
|
||||
},
|
||||
{
|
||||
path: 'edit/:id(\\d+)',
|
||||
component: () => import('@/views/example/edit'),
|
||||
name: 'EditArticle',
|
||||
meta: { title: 'editArticle', noCache: true },
|
||||
hidden: true
|
||||
},
|
||||
{
|
||||
path: 'list',
|
||||
component: () => import('@/views/example/list'),
|
||||
name: 'ArticleList',
|
||||
meta: { title: 'articleList', icon: 'list' }
|
||||
}
|
||||
]
|
||||
},
|
||||
|
||||
{
|
||||
path: '/tab',
|
||||
component: Layout,
|
||||
children: [
|
||||
{
|
||||
path: 'index',
|
||||
component: () => import('@/views/tab/index'),
|
||||
name: 'Tab',
|
||||
meta: { title: 'tab', icon: 'tab' }
|
||||
}
|
||||
]
|
||||
},
|
||||
|
||||
{
|
||||
path: '/error',
|
||||
component: Layout,
|
||||
redirect: 'noredirect',
|
||||
name: 'ErrorPages',
|
||||
meta: {
|
||||
title: 'errorPages',
|
||||
icon: '404'
|
||||
},
|
||||
children: [
|
||||
{
|
||||
path: '401',
|
||||
component: () => import('@/views/errorPage/401'),
|
||||
name: 'Page401',
|
||||
meta: { title: 'page401', noCache: true }
|
||||
},
|
||||
{
|
||||
path: '404',
|
||||
component: () => import('@/views/errorPage/404'),
|
||||
name: 'Page404',
|
||||
meta: { title: 'page404', noCache: true }
|
||||
}
|
||||
]
|
||||
},
|
||||
|
||||
{
|
||||
path: '/error-log',
|
||||
component: Layout,
|
||||
redirect: 'noredirect',
|
||||
children: [
|
||||
{
|
||||
path: 'log',
|
||||
component: () => import('@/views/errorLog/index'),
|
||||
name: 'ErrorLog',
|
||||
meta: { title: 'errorLog', icon: 'bug' }
|
||||
}
|
||||
]
|
||||
},
|
||||
|
||||
{
|
||||
path: '/excel',
|
||||
component: Layout,
|
||||
redirect: '/excel/export-excel',
|
||||
name: 'Excel',
|
||||
meta: {
|
||||
title: 'excel',
|
||||
icon: 'excel'
|
||||
},
|
||||
children: [
|
||||
{
|
||||
path: 'export-excel',
|
||||
component: () => import('@/views/excel/exportExcel'),
|
||||
name: 'ExportExcel',
|
||||
meta: { title: 'exportExcel' }
|
||||
},
|
||||
{
|
||||
path: 'export-selected-excel',
|
||||
component: () => import('@/views/excel/selectExcel'),
|
||||
name: 'SelectExcel',
|
||||
meta: { title: 'selectExcel' }
|
||||
},
|
||||
{
|
||||
path: 'upload-excel',
|
||||
component: () => import('@/views/excel/uploadExcel'),
|
||||
name: 'UploadExcel',
|
||||
meta: { title: 'uploadExcel' }
|
||||
}
|
||||
]
|
||||
},
|
||||
|
||||
{
|
||||
path: '/zip',
|
||||
component: Layout,
|
||||
redirect: '/zip/download',
|
||||
alwaysShow: true,
|
||||
meta: { title: 'zip', icon: 'zip' },
|
||||
children: [
|
||||
{
|
||||
path: 'download',
|
||||
component: () => import('@/views/zip/index'),
|
||||
name: 'ExportZip',
|
||||
meta: { title: 'exportZip' }
|
||||
}
|
||||
]
|
||||
},
|
||||
|
||||
{
|
||||
path: '/pdf',
|
||||
component: Layout,
|
||||
redirect: '/pdf/index',
|
||||
children: [
|
||||
{
|
||||
path: 'index',
|
||||
component: () => import('@/views/pdf/index'),
|
||||
name: 'PDF',
|
||||
meta: { title: 'pdf', icon: 'pdf' }
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
path: '/pdf/download',
|
||||
component: () => import('@/views/pdf/download'),
|
||||
hidden: true
|
||||
},
|
||||
|
||||
{
|
||||
path: '/theme',
|
||||
component: Layout,
|
||||
redirect: 'noredirect',
|
||||
children: [
|
||||
{
|
||||
path: 'index',
|
||||
component: () => import('@/views/theme/index'),
|
||||
name: 'Theme',
|
||||
meta: { title: 'theme', icon: 'theme' }
|
||||
}
|
||||
]
|
||||
},
|
||||
|
||||
{
|
||||
path: '/clipboard',
|
||||
component: Layout,
|
||||
redirect: 'noredirect',
|
||||
children: [
|
||||
{
|
||||
path: 'index',
|
||||
component: () => import('@/views/clipboard/index'),
|
||||
name: 'ClipboardDemo',
|
||||
meta: { title: 'clipboardDemo', icon: 'clipboard' }
|
||||
}
|
||||
]
|
||||
},
|
||||
|
||||
{
|
||||
path: '/i18n',
|
||||
component: Layout,
|
||||
children: [
|
||||
{
|
||||
path: 'index',
|
||||
component: () => import('@/views/i18n-demo/index'),
|
||||
name: 'I18n',
|
||||
meta: { title: 'i18n', icon: 'international' }
|
||||
}
|
||||
]
|
||||
},
|
||||
|
||||
{
|
||||
path: 'external-link',
|
||||
component: Layout,
|
||||
children: [
|
||||
{
|
||||
path: 'https://github.com/PanJiaChen/vue-element-admin',
|
||||
meta: { title: 'externalLink', icon: 'link' }
|
||||
}
|
||||
]
|
||||
},
|
||||
|
||||
{ path: '*', redirect: '/404', hidden: true }
|
||||
]
|
||||
|
|
|
|||
|
|
@ -1,5 +1,7 @@
|
|||
import { asyncRouterMap, constantRouterMap } from '@/router'
|
||||
import { constantRoutes, generalRoutes } from '@/router'
|
||||
import { fetchAsyncRoutes } from '@/api/routes'
|
||||
|
||||
const _import = path => () => import(`@/views/${path}`)
|
||||
/**
|
||||
* 通过meta.role判断是否与当前用户权限匹配
|
||||
* @param roles
|
||||
|
|
@ -13,50 +15,61 @@ function hasPermission(roles, route) {
|
|||
}
|
||||
}
|
||||
|
||||
// 将从服务器获得的路由表转换为vue-router的路由表
|
||||
function mapAsyncRoutes(asyncRoutes) {
|
||||
return asyncRoutes.map(route => {
|
||||
route.component && (route.component = _import(route.component))
|
||||
if (route.children) {
|
||||
route.children = mapAsyncRoutes(route.children)
|
||||
}
|
||||
return route
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* 递归过滤异步路由表，返回符合用户角色权限的路由表
|
||||
* @param routes asyncRouterMap
|
||||
* @param routes asyncRoutes
|
||||
* @param roles
|
||||
*/
|
||||
function filterAsyncRouter(routes, roles) {
|
||||
const res = []
|
||||
|
||||
routes.forEach(route => {
|
||||
const tmp = { ...route }
|
||||
if (hasPermission(roles, tmp)) {
|
||||
if (tmp.children) {
|
||||
tmp.children = filterAsyncRouter(tmp.children, roles)
|
||||
}
|
||||
res.push(tmp)
|
||||
function filterAsyncRoutes(routes, roles) {
|
||||
return routes.filter(route => {
|
||||
if (!hasPermission(roles, route)) {
|
||||
return false
|
||||
}
|
||||
if (route.children) {
|
||||
route.children = filterAsyncRoutes(route.children, roles)
|
||||
}
|
||||
return true
|
||||
})
|
||||
|
||||
return res
|
||||
}
|
||||
|
||||
const permission = {
|
||||
state: {
|
||||
routers: [],
|
||||
addRouters: []
|
||||
addRouters: [],
|
||||
asyncRoutes: []
|
||||
},
|
||||
mutations: {
|
||||
SET_ROUTERS: (state, routers) => {
|
||||
state.addRouters = routers
|
||||
state.routers = constantRouterMap.concat(routers)
|
||||
SET_ROUTERS: (state, routes) => {
|
||||
state.addRouters = routes
|
||||
state.routers = constantRoutes.concat(routes)
|
||||
}
|
||||
},
|
||||
actions: {
|
||||
GenerateRoutes({ commit }, data) {
|
||||
return new Promise(resolve => {
|
||||
const { roles } = data
|
||||
let accessedRouters
|
||||
if (roles.includes('admin')) {
|
||||
accessedRouters = asyncRouterMap
|
||||
} else {
|
||||
accessedRouters = filterAsyncRouter(asyncRouterMap, roles)
|
||||
}
|
||||
commit('SET_ROUTERS', accessedRouters)
|
||||
resolve()
|
||||
let accessedRoutes
|
||||
fetchAsyncRoutes().then(res => {
|
||||
const asyncRoutes = res.data
|
||||
if (roles.includes('admin')) {
|
||||
accessedRoutes = mapAsyncRoutes(asyncRoutes).concat(generalRoutes)
|
||||
} else {
|
||||
accessedRoutes = mapAsyncRoutes(filterAsyncRoutes(asyncRoutes, roles)).concat(generalRoutes)
|
||||
}
|
||||
commit('SET_ROUTERS', accessedRoutes)
|
||||
resolve(accessedRoutes)
|
||||
})
|
||||
})
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue