diff --git a/src/components/layout/Header.vue b/src/components/layout/Header.vue index abd77b8e..37a6edea 100644 --- a/src/components/layout/Header.vue +++ b/src/components/layout/Header.vue @@ -308,7 +308,7 @@ export default { return this.$store.getters.menuList.find(menu => menu.code === 'networkAnalytics') }, otherMenu () { - return this.$store.getters.menuList.filter(menu => ['networkAnalytics', 'chart', 'I18N', 'entityDetail', 'temp', 'entityGraph', 'detectionPolicy'].indexOf(menu.code) === -1) + return this.$store.getters.menuList.filter(menu => ['networkAnalytics', 'I18N', 'entityDetail', 'entityGraph', 'detectionPolicy'].indexOf(menu.code) === -1) /* function excludeButton (menu) { for (let i = 0; i < menu.length; i++) { @@ -370,7 +370,7 @@ export default { }, async breadcrumb (n) { this.curTabProp = this.$route.query.dimensionType ? this.$route.query.dimensionType : null - if (this.$route.params.typeName === fromRoute.dnsServiceInsights) { + if (this.$route.path.replace('/panel/', '') === fromRoute.dnsServiceInsights) { if (this.dnsQtypeMapData.size === 0) { this.dnsQtypeMapData = await getDnsMapData('dnsQtype') } @@ -388,7 +388,7 @@ export default { async mounted () { this.from = Object.keys(this.entityType)[0] // 是否需要dns的qtype和rcode的数据字典 - if (this.$route.params.typeName === fromRoute.dnsServiceInsights) { + if (this.$route.path.replace('/panel/', '') === fromRoute.dnsServiceInsights) { if (this.dnsQtypeMapData.size === 0) { this.dnsQtypeMapData = await getDnsMapData('dnsQtype') } @@ -427,7 +427,7 @@ export default { }, methods: { generateBreadcrumb (breadcrumb, menus) { - if (this.route === '/entityDetail') { + /*if (this.route === '/entityDetail') { const entityMenu = menus.find(m => m.route === '/entityExplorer') const entityDetailMenu = menus.find(m => m.route === '/entityDetail') breadcrumb.push({ @@ -459,7 +459,7 @@ export default { type: entityGraphMenu.type }) return true - } + }*/ const menu = menus.find(m => m.route === this.route) if (menu) { breadcrumb.unshift({ @@ -511,7 +511,7 @@ export default { }, getCurTabByLabel (label) { let curTab = null - const tableType = this.$route.params ? this.$route.params.typeName : 'networkOverview' + const tableType = this.$route.path.replace('/panel/', '') || 'networkOverview' const curTableInCode = networkTable[tableType] ? networkTable[tableType] : networkTable.networkOverview if (curTableInCode && curTableInCode.tabList) { curTab = curTableInCode.tabList.find(item => item.label === label) @@ -524,7 +524,7 @@ export default { const currentValue = document.getElementById('breadcrumbValue') ? document.getElementById('breadcrumbValue').innerText : '' const columnName = this.getUrlParam(this.curTabState.thirdMenu, '') let type = 'ip' - const tableType = this.$route.params ? this.$route.params.typeName : 'networkOverview' + const tableType = this.$route.path.replace('/panel/', '') || 'networkOverview' const curTableInCode = networkTable[tableType] ? networkTable[tableType] : networkTable.networkOverview if (curTableInCode && curTableInCode.tabList) { const curTab = curTableInCode.tabList.find(item => item.label === columnName) @@ -548,7 +548,7 @@ export default { axios.get(curTableInCode.url.drilldownList, { params }).then(async response => { if (response.status === 200) { this.breadcrumbColumnValueListShow = response.data.data.result - if (this.$route.params.typeName === fromRoute.dnsServiceInsights) { + if (this.$route.path.replace('/panel/', '') === fromRoute.dnsServiceInsights) { if (this.dnsQtypeMapData.size === 0) { this.dnsQtypeMapData = await getDnsMapData('dnsQtype') } @@ -679,7 +679,7 @@ export default { }, async handleCurDrilldownTableConfig (thirdMenu) { // const userId = localStorage.getItem(storageKey.userId) - const tableType = this.$route.params ? this.$route.params.typeName : 'networkOverview' + const tableType = this.$route.path.replace('/panel/', '') || 'networkOverview' const metric = this.getUrlParam(this.curTabState.tableMetric, 'Bits/s') const drillDownTableConfigs = await combineDrilldownTableWithUserConfig() const currentTableConfig = drillDownTableConfigs.find(config => config.route === tableType) @@ -701,6 +701,7 @@ export default { } }, async jump (route, columnName, columnValue, opeType) { + route = route.replace('redirect:', '') if (route === '/panel/linkMonitor' && opeType === 3) { return true } @@ -720,7 +721,7 @@ export default { this.$store.commit('setNetworkOverviewTabList', []) } // 清空网络概况的特殊面包屑 - const tableType = this.$route.params ? this.$route.params.typeName : 'networkOverview' + const tableType = this.$route.path.replace('/panel/', '') || 'networkOverview' const metric = this.getUrlParam(this.curTabState.tableMetric, 'Bits/s') const curTab = await getDefaultCurTab(tableType, metric, columnName) this.$store.getters.menuList.forEach(menu => { diff --git a/src/permission.js b/src/permission.js index ad112d10..1ab36616 100644 --- a/src/permission.js +++ b/src/permission.js @@ -32,14 +32,19 @@ router.beforeEach(async (to, from, next) => { store.commit('setMenuList', menuList) store.commit('setButtonList', buttonList) store.commit('setRoleList', roleList) - } - if (to.path) { - next() - /* if (hasMenu(store.getters.menuList, to.path)) { + const homeRoute = { + path: '/', + name: 'home', + component: () => import('@/components/layout/Home'), + children: [] + } + handleRoutes(menuList, homeRoute.children) + router.addRoute(homeRoute) + next({ ...to, replace: true }) + } else { + if (to.path) { next() - } else { - ElMessage.error('No access') // TODO 国际化 - } */ + } } } } else { @@ -160,3 +165,99 @@ export function getWelcomeMenu (menu) { } } } + +export function handleComponent (code) { + switch (code) { + case 'networkOverview': + case 'networkAppPerformance': + case 'dnsServiceInsights': + case 'linkMonitor': + return () => import('@/views/charts2/Panel') + case 'entity': + return () => import('@/views/entityExplorer/EntityExplorer') + case 'entityDetail': + return () => import('@/views/entityExplorer/EntityDetail') + case 'entityGraph': + return () => import('@/views/entityExplorer/EntityGraph') + case 'securityEvents': + case 'performanceEvents': + return () => import('@/views/detections/Index') + case 'detectionPolicy': + return () => import('@/views/detections/detectionPolicies/Index') + case 'createDetectionPolicy': + case 'editDetectionPolicy': + return () => import('@/views/detections/detectionPolicies/PolicyForm') + case 'report': + return () => import('@/views/report/Report') + case 'knowledgeBase': + case 'userDefinedLibrary': + return () => import('@/views/setting/KnowledgeBase') + case 'createUserDefinedLibrary': + case 'editUserDefinedLibrary': + return () => import('@/views/setting/KnowledgeBaseForm') + case 'administration': + return () => import('@/views/administration/Index') + case 'user': + return () => import('@/views/administration/User') + case 'role': + return () => import('@/views/administration/Roles') + case 'operationLog': + return () => import('@/views/administration/OperationLog') + case 'appearance': + return () => import('@/views/administration/Appearance') + case 'I18N': + return () => import('@/views/administration/I18n') + default: + return null + } +} + +export function handleRoutes (menus, routes) { + menus.forEach(menu => { + if (menu.route === '' && (!menu.children || menu.children.length < 0)) { + return false + } + // administration的路由使用了嵌套,其他的是平铺 + if (menu.pid === 0 && menu.code === 'administration') { + const path = menu.route.replace('redirect:', '') + if (menu.children && menu.children.length > 0) { + const route = { + name: menu.name, + path, + redirect: menu.children[0].route, + component: handleComponent(menu.code), + children: [] + } + menu.children.forEach(c => { + route.children.push({ + name: c.name, + path: c.route, + component: handleComponent(c.code) + }) + }) + routes.push(route) + } + } else { + if (menu.route && menu.route.startsWith('redirect:')) { + const path = menu.route.replace('redirect:', '') + if (menu.children && menu.children.length > 0) { + routes.push({ + name: menu.name, + path, + redirect: menu.children[0].route + }) + handleRoutes(menu.children, routes) + } + } else { + routes.push({ + name: menu.code, + path: menu.route, + component: handleComponent(menu.code) + }) + } + if (menu.children && menu.children.length > 0) { + handleRoutes(menu.children, routes) + } + } + }) +} diff --git a/src/router/index.js b/src/router/index.js index 0adc5029..fd12aab7 100644 --- a/src/router/index.js +++ b/src/router/index.js @@ -5,106 +5,6 @@ const routes = [ { path: '/login', component: () => import('@/Login') - }, - { - path: '/', - component: () => import('@/components/layout/Home'), - children: [ - { - name: 'panel', - path: '/panel/:typeName', - component: () => import('@/views/charts2/Panel') - }, - { - path: '/report/builtIn', - component: () => import('@/views/report/Report') - }, - { - path: '/entityExplorer', - component: () => import('@/views/entityExplorer/EntityExplorer') - }, - { - path: '/entityDetail', - component: () => import('@/views/entityExplorer/EntityDetail') - }, - { - path: '/entityGraph', - component: () => import('@/views/entityExplorer/EntityGraph') - }, - { - path: '/detection', - redirect: '/detection/securityEvent' - }, - { - path: '/detection/:typeName', - component: () => import('@/views/detections/Index') - }, - { - path: '/businessLog/viewer', - component: () => import('@/views/businessLog/Viewer') - }, - { - path: '/knowledgeBase', - component: () => import('@/views/setting/KnowledgeBase') - }, - { - path: '/knowledgeBase/userDefinedLibrary', - component: () => import('@/views/setting/KnowledgeBase') - }, - { - path: '/knowledgeBase/userDefinedLibrary/create', - component: () => import('@/views/setting/KnowledgeBaseForm') - }, - { - path: '/knowledgeBase/userDefinedLibrary/edit', - component: () => import('@/views/setting/KnowledgeBaseForm') - }, - { - name: 'Administration', - path: '/administration', - redirect: '/administration/user', - component: () => import('@/views/administration/Index'), - children: [ - { - name: 'User', - path: '/administration/user', - component: () => import('@/views/administration/User') - }, - { - name: 'Role', - path: '/administration/role', - component: () => import('@/views/administration/Roles') - }, - { - name: 'OperationLog', - path: '/administration/operationLog', - component: () => import('@/views/administration/OperationLog') - }, - { - name: 'Appearance', - path: '/administration/appearance', - component: () => import('@/views/administration/Appearance') - } - ] - }, - { - name: 'I18n', - path: '/i18n', - component: () => import('@/views/administration/I18n') - }, - { - path: '/detectionPolicy', - component: () => import('@/views/detections/detectionPolicies/Index') - }, - { - path: '/detectionPolicy/create', - component: () => import('@/views/detections/detectionPolicies/PolicyForm') - }, - { - path: '/detectionPolicy/edit', - component: () => import('@/views/detections/detectionPolicies/PolicyForm') - } - ] } ] diff --git a/src/store/modules/user.js b/src/store/modules/user.js index 5e8157a2..43fb3242 100644 --- a/src/store/modules/user.js +++ b/src/store/modules/user.js @@ -1,6 +1,6 @@ import axios from 'axios' import router from '@/router' -import { getWelcomeMenu, sortByOrderNum } from '@/permission' +import { getWelcomeMenu, sortByOrderNum, handleRoutes } from '@/permission' import { ElMessage } from 'element-plus' // dependent on utc plugin import { dbDrilldownTableConfig, storageKey } from '@/utils/constants' import { getConfigVersion } from '@/utils/tools' @@ -64,7 +64,14 @@ const user = { store.commit('setMenuList', menuList) store.commit('setButtonList', res2.data.buttons) store.commit('setRoleList', res2.data.roles) - + const homeRoute = { + path: '/', + name: 'home', + component: () => import('@/components/layout/Home'), + children: [] + } + handleRoutes(menuList, homeRoute.children) + router.addRoute(homeRoute) if (res.loginSuccessPath) { let tempArr = res.loginSuccessPath.split('?') const path = tempArr[0] diff --git a/src/utils/constants.js b/src/utils/constants.js index 07ea23f6..8a364103 100644 --- a/src/utils/constants.js +++ b/src/utils/constants.js @@ -213,7 +213,7 @@ export const detectionPageType = { } export const listScrollPath = [ - '/entityExplorer', + '/entity', '/detection/performanceEvent', '/detection/securityEvent' ] diff --git a/src/views/charts/Panel.vue b/src/views/charts/Panel.vue index e052f617..a47f6242 100644 --- a/src/views/charts/Panel.vue +++ b/src/views/charts/Panel.vue @@ -5,12 +5,12 @@ v-if="panel.params && panel.params.wholeScreenScroll" id="wholeScreenBox" > - - + -->
@@ -49,7 +49,7 @@