From 0d86c19b122011dc528c624597b0952660d69aba Mon Sep 17 00:00:00 2001
From: loulijun2021 <1694218219@qq.com>
Date: 星期日, 26 六月 2022 09:32:53 +0800
Subject: [PATCH] 1.优化动态路由
---
src/permission.js | 28 --
src/store/modules/user.js | 34 +++
src/views/login/index.vue | 2
src/layout/components/Navbar.vue | 27 ---
src/layout/components/Sidebar/index.vue | 70 +-------
src/store/modules/permission.js | 181 +++++-----------------
src/router/index.js | 104 ------------
7 files changed, 96 insertions(+), 350 deletions(-)
diff --git a/src/layout/components/Navbar.vue b/src/layout/components/Navbar.vue
index 4b04a7c..c94a446 100644
--- a/src/layout/components/Navbar.vue
+++ b/src/layout/components/Navbar.vue
@@ -72,30 +72,9 @@
this.$store.dispatch('app/toggleSideBar')
},
async logout() {
- // await this.$store.dispatch('user/logout')
- const usercode = getCookie('navTabId')
- const username = getCookie('admin')
- const usertype = getCookie('usertype')
- const userid = getCookie('userid')
- const data = {
- usercode,
- username,
- usertype,
- userid
- }
- const res = await logout(data)
- if (res.code === '200') {
- removeToken()
- resetRouter()
- removeCookie('admin')
- removeCookie('navTabId')
- removeCookie('usertype')
- removeCookie('userid')
- this.$message.success('閫�鍑烘垚鍔燂紒')
- this.$router.push('/login')
- // this.$router.push(`/login?redirect=${this.$route.fullPath}`)
- }
- // this.$router.push(`/login`)
+ await this.$store.dispatch('user/logout')
+ this.$message.success('閫�鍑烘垚鍔燂紒')
+ this.$router.push(`/login`)
}
}
}
diff --git a/src/layout/components/Sidebar/index.vue b/src/layout/components/Sidebar/index.vue
index 33acb9b..5e5fc95 100644
--- a/src/layout/components/Sidebar/index.vue
+++ b/src/layout/components/Sidebar/index.vue
@@ -13,14 +13,14 @@
:collapse-transition="false"
mode="vertical"
>
- <sidebar-item
- v-for="route in routes"
- :key="route.path"
- class="el-scrollbar-menu"
- :item="route"
- :base-path="route.path"
- />
- <!-- <sidebar-item v-for="route in permission_routes" :key="route.path" :item="route" :base-path="route.path" />-->
+ <!-- <sidebar-item-->
+ <!-- v-for="route in routes"-->
+ <!-- :key="route.path"-->
+ <!-- class="el-scrollbar-menu"-->
+ <!-- :item="route"-->
+ <!-- :base-path="route.path"-->
+ <!-- />-->
+ <sidebar-item v-for="route in permission_routes" :key="route.path" :item="route" :base-path="route.path" />
</el-menu>
</el-scrollbar>
@@ -47,65 +47,13 @@
routers: []
}
},
- async created() {
- const { data: res } = await LoginMenu()
- this.routers = res
- this.routers.unshift({ code: '1000', name: '绯荤粺璁剧疆' })
- },
computed: {
...mapGetters([
'permission_routes',
'sidebar'
]),
routes() {
- // 鎺ュ彛涓殑杩斿洖鍊� 杩涜鏍煎紡鍖�
- const newCodeArr = []
- const newCodeNameArr = []
- this.routers.forEach(item => {
- if (item.code) {
- newCodeArr.push(item.code)
- newCodeNameArr.push({ code: item.code, title: item.name })
- if (item.children) {
- item.children.forEach(it => {
- if (it.code) {
- newCodeArr.push(it.code)
- newCodeNameArr.push({ code: it.code, title: it.name })
- }
- })
- }
- }
- })
-
- // 鏈湴璺敱涓� 鎺ュ彛涓殑杩斿洖鍊艰繘琛屽尮閰嶏紝鏈夌浉鍚宑ode鐨勫�艰繘琛宲ush
- const arr = this.$router.options.routes
- const arr2 = []
- arr.forEach((item, index) => {
- if (newCodeArr.includes(item.code) && item.children.length === 1) {
- arr2.push(item)
- } else if (newCodeArr.includes(item.code) && item.children.length > 1) {
- newCodeNameArr.forEach(it1 => { // 鏇挎崲鎺ュ彛涓殑name涓鸿彍鍗曞悕绉�
- if (it1.code === item.code) {
- item.meta.title = it1.title
- }
- })
- const a = []
- item.children.forEach((it2, ind) => { // 閬嶅巻
- if (newCodeArr.includes(it2.code)) {
- newCodeNameArr.forEach(it1 => { // 鏇挎崲鎺ュ彛涓殑name涓鸿彍鍗曞悕绉�
- if (it2.code === it1.code) {
- it2.meta.title = it1.title
- }
- })
- a.push(it2)
- }
- })
- item.children = a
- arr2.push(item)
- }
- })
-
- return arr2
- // return arr
+ return this.$router.options.routes
},
activeMenu() {
const route = this.$route
diff --git a/src/permission.js b/src/permission.js
index 1c2f525..2a30c66 100644
--- a/src/permission.js
+++ b/src/permission.js
@@ -27,39 +27,25 @@
NProgress.done()
} else {
const hasGetUserInfo = store.getters.name
+ console.log(hasGetUserInfo, 1)
if (hasGetUserInfo) {
next()
} else {
try {
- // get user info
- // await store.dispatch('user/getInfo')
- // next()
-
// 鎷夊彇info
// const info = await store.dispatch('user/getInfo')
+ // 鎷夊彇鑿滃崟淇℃伅琛�
+ const menu = await store.dispatch('user/getMenu')
// 鐢熸垚鍙闂殑璺敱琛�
- // await store.dispatch('permission/generateRoutes')
+ await store.dispatch('permission/generateRoutes', menu)
// 鍔ㄦ�佹坊鍔犲彲璁块棶璺敱琛�
- // router.addRoutes(store.getters.addRouters)
+ router.addRoutes(store.getters.addRouters)
// hack鏂规硶 纭繚addRoutes宸插畬鎴�
- // next({ ...to, replace: true })
+ next({ ...to, replace: true })
- // console.log(store.getters.addRouters, 1)
- // const s = store.getters.addRouters
- // router.addRoutes(s)
- // if (s) {
- // console.log(s)
- // }
- // const s = store.getters.addRouters
- // router.addRoutes(s)
- //
- // if (s) {
- // console.log(s, 11111)
- // }
- next()
- // next({ ...to, replace: true })
+ // next()
} catch (error) {
// remove token and go to login page to re-login
await store.dispatch('user/resetToken')
diff --git a/src/router/index.js b/src/router/index.js
index 2f6b37a..5076bfa 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -36,7 +36,6 @@
component: () => import('@/views/login/index'),
hidden: true
},
-
{
path: '/404',
component: () => import('@/views/404'),
@@ -58,14 +57,16 @@
component: Layout,
redirect: '/index',
name: '绯荤粺棣栭〉',
- code: '1000',
children: [{
path: 'index',
name: 'index',
component: () => import('@/views/xtsy/index'),
meta: { title: '绯荤粺棣栭〉', icon: 'home', affix: true }
}]
- },
+ }
+ // { path: '*', redirect: '/404', hidden: true }
+]
+export const asyncRoutes = [
{
path: '/jcsz',
component: Layout,
@@ -478,103 +479,8 @@
meta: { title: 'SOP涓婁紶', icon: '' }
}
]
- },
- { path: '*', redirect: '/404', hidden: true }
+ }
]
-
-// export const constantRoutesxxxxxx = [
-//
-// {
-// path: '/login',
-// component: () => import('@/views/login/index'),
-// hidden: true
-// },
-// {
-// path: '/404',
-// component: () => import('@/views/404'),
-// hidden: true
-// },
-//
-// {
-// path: '/redirect',
-// component: Layout,
-// hidden: true,
-// children: [
-// {
-// path: '/redirect/:path(.*)',
-// component: () => import('@/views/redirect/index')
-// }
-// ]
-// },
-// {
-// path: '/',
-// component: Layout,
-// redirect: '/dashboard',
-// children: [{
-// path: 'dashboard',
-// name: 'Dashboard',
-// component: () => import('@/views/dashboard/index')
-// }]
-// },
-// {
-// path: '/xtsy',
-// component: Layout,
-// redirect: '/stxy/index',
-// children: [
-// {
-// path: 'index',
-// name: 'Form',
-// component: () => import('@/views/xtsy/index'),
-// meta: { title: '绯荤粺棣栭〉', icon: 'form', affix: true }
-// }
-// ]
-// },
-// {
-// path: '/jcsz',
-// component: Layout,
-// redirect: '/jcsz/zzjg',
-// name: 'jcsz',
-// meta: { title: '鍩虹璁剧疆', icon: 'el-icon-s-help' },
-// children: [
-// {
-// path: 'zzjg',
-// name: 'Table',
-// component: () => import('@/views/jcsz/zzjg'),
-// meta: { title: '缁勭粐鏋舵瀯', icon: 'table' }
-// },
-// {
-// path: 'rwgl',
-// name: 'rwgl',
-// component: () => import('@/views/jcsz/rwgl'),
-// meta: { title: '浠诲姟绠＄悊', icon: 'tree' }
-// }
-// ]
-// },
-// {
-// path: '/zzmx',
-// component: Layout,
-// redirect: '/zzmx/gylx',
-// name: 'zzmx',
-// meta: { title: '鍒堕�犳ā鍨�', icon: 'el-icon-s-help' },
-// children: [
-// {
-// path: 'gylx',
-// name: 'gylx',
-// component: () => import('@/views/zzmx/gylx'),
-// meta: { title: '鍏泭璺嚎', icon: 'table' }
-// },
-// {
-// path: 'jpgj',
-// name: 'jpgj',
-// component: () => import('@/views/zzmx/jpgj'),
-// meta: { title: '鑺傛媿宸ヤ环', icon: 'tree' }
-// }
-// ]
-// },
-//
-// 404 page must be placed at the end !!!
-// , {path: '*', redirect: '/404', hidden: true}
-// ]
const createRouter = () => new Router({
// mode: 'history', // require service support
diff --git a/src/store/modules/permission.js b/src/store/modules/permission.js
index b6cba09..2b74277 100644
--- a/src/store/modules/permission.js
+++ b/src/store/modules/permission.js
@@ -1,4 +1,4 @@
-import { commonRoutes } from '@/router'
+import { asyncRoutes, commonRoutes } from '@/router'
import Layout from '@/layout'
// 鍒ゆ柇鏄惁鏈夋潈闄�
@@ -14,51 +14,49 @@
* 鎶婂悗鍙拌繑鍥炶彍鍗曠粍瑁呮垚routes瑕佹眰鐨勬牸寮�
* @param {*} routes
*/
-export function getAsyncRoutes(routes) {
- const res = []
+export function getAsyncRoutes(routes2, menu) {
+ const menuCode = []// 灏嗗悗绔痗ode鍙栧嚭瀛樻垚鏁扮粍褰㈠紡
+ menu.forEach(item => {
+ menuCode.push(item.code)
+ if (item.children && item.children.length > 0) {
+ item.children.forEach(it => {
+ menuCode.push(it.code)
+ })
+ }
+ })
+
+ const routes = routes2
+ const newRoutes = []
routes.forEach(item => {
- const newItem = {}
- if (item.component) {
- if (item.component === 'Layout') {
- newItem.component = Layout
- newItem.path = item.path
- if (item.redirect) {
- newItem.redirect = item.redirect
+ if (menuCode.includes(item.code) && item.children && item.children.length > 0) {
+ console.log(item)
+ const children = []
+ let flag = false// 鍒ゆ柇鏄惁鏈塩hildren瀛樿繘鍘�
+ item.children.forEach(it => {
+ if (menuCode.includes(it.code)) {
+ children.push(it)
+ flag = true
}
- if (item.hidden === '0') {
- newItem.hidden = false
- }
- if (item.hidden === '1') {
- newItem.hidden = true
- }
- if (item.meta) {
- newItem.meta = { title: item.meta.title, icon: item.meta.icon, affix: item.meta.affix === '1' }
- }
- } else {
- newItem.path = item.path
- if (item.name) {
- newItem.name = item.name
- }
- if (item.hidden === '0') {
- newItem.hidden = false
- }
- if (item.hidden === '1') {
- newItem.hidden = true
- }
- newItem.component = (resolve) => require(['@/views' + `${item.component}`], resolve)
- if (item.meta) {
- newItem.meta = { title: item.meta.title, icon: item.meta.icon, affix: item.meta.affix === '1' }
- }
+ })
+ if (flag) {
+ newRoutes.push({
+ alwaysShow: item.alwaysShow,
+ code: item.code,
+ name: item.name,
+ path: item.path,
+ redirect: item.redirect,
+ component: item.component,
+ children: children,
+ meta: item.meta
+ })
}
}
-
- if (item.children && item.children.length) {
- newItem.children = getAsyncRoutes(item.children)
- }
- res.push(newItem)
})
- return res
+
+ newRoutes.push({ path: '*', redirect: '/404', hidden: true })
+
+ return newRoutes
}
// 杩囨护鍑烘湁鏉冮檺鐨勮矾鐢�
@@ -89,105 +87,12 @@
}
const actions = {
- generateRoutes({ commit }, info) {
+ generateRoutes({ commit }, menu) {
return new Promise(resolve => {
- // const accessedRoutes
-
- // getMenuList().then(routes => {
- // const asyncRoutes = getAsyncRoutes(routes.data) // 瀵硅矾鐢辨牸寮忚繘琛屽鐞�
- // commit('SET_ROUTES', asyncRoutes)
- // resolve(asyncRoutes)
- // })
-
- // '0'浠ｈ〃false,'1'浠ｈ〃true
- const routes = [
- {
- path: '/',
- component: 'Layout',
- redirect: '/index',
- children: [{
- path: 'index',
- name: 'index',
- component: '/xtsy/index',
- meta: { title: '绯荤粺棣栭〉', icon: 'el-icon-house', affix: '1' }
- }]
- },
- {
- path: '/redirect',
- component: 'Layout',
- hidden: '1',
- children: [
- {
- path: '/redirect/:path(.*)',
- component: '/redirect/index'
- }
- ]
- },
- {
- path: '/jcsz',
- component: 'Layout',
- redirect: '/jcsz/zzjg',
- name: 'jcsz',
- meta: { title: '鍩虹璁剧疆', icon: 'el-icon-setting' },
- children: [
- {
- path: 'zzjg',
- name: 'Table',
- component: '/jcsz/zzjg',
- meta: { title: '缁勭粐鏋舵瀯', icon: '' }
- },
- {
- path: 'yhqd',
- name: 'yhqd',
- component: '/jcsz/yhqd',
- meta: { title: '鐢ㄦ埛娓呭崟', icon: '' }
- },
- {
- path: 'jsqd',
- name: 'jsqd',
- component: '/jcsz/jsqd',
- meta: { title: '瑙掕壊娓呭崟', icon: '' }
- },
- {
- path: 'wldw',
- name: 'wldw',
- component: '/jcsz/wldw',
- meta: { title: '寰�鏉ュ崟浣�', icon: '' }
- }
- ]
- },
- {
- path: '/zzmx',
- component: 'Layout',
- redirect: '/zzmx/gylx',
- name: 'zzmx',
- meta: { title: '鍒堕�犳ā鍨�', icon: 'el-icon-s-help' },
- children: [
- {
- path: 'gylx',
- name: 'gylx',
- component: '/zzmx/gylx',
- meta: { title: '鍏泭璺嚎', icon: '' }
- },
- {
- path: 'jpgj',
- name: 'jpgj',
- component: '/zzmx/jpgj',
- meta: { title: '鑺傛媿宸ヤ环', icon: '' }
- },
- {
- path: 'test',
- name: 'test',
- component: '/zzmx/test',
- meta: { title: '娴嬭瘯椤甸潰', icon: '' }
- }
- ]
- }
- ]
- const asyncRoutes = getAsyncRoutes(routes)
- asyncRoutes.push({ path: '*', redirect: '/404', hidden: true })
- commit('SET_ROUTES', asyncRoutes)
- resolve(asyncRoutes)
+ const newRoutes = getAsyncRoutes(asyncRoutes, menu)
+ console.log(newRoutes, 2)
+ commit('SET_ROUTES', newRoutes)
+ resolve(newRoutes)
})
}
}
diff --git a/src/store/modules/user.js b/src/store/modules/user.js
index c35edb2..3f0f241 100644
--- a/src/store/modules/user.js
+++ b/src/store/modules/user.js
@@ -1,4 +1,4 @@
-import { login, logout, getInfo } from '@/api/user'
+import { login, logout, getInfo, LoginMenu } from '@/api/user'
import { getToken, setToken, removeToken, setCookie, removeCookie, getCookie } from '@/utils/auth'
import { resetRouter } from '@/router'
@@ -21,6 +21,9 @@
},
SET_NAME: (state, name) => {
state.name = name
+ },
+ SET_MENU: (state, menu) => {
+ state.menu = menu
},
SET_AVATAR: (state, avatar) => {
state.avatar = avatar
@@ -71,15 +74,33 @@
})
})
},
+ // get user menu
+ getMenu({ commit, state }) {
+ return new Promise((resolve, reject) => {
+ LoginMenu().then(res => {
+ if (res.code === '200') {
+ commit('SET_NAME', res.Message)
+ commit('SET_MENU', res.data)
+ resolve(res.data)
+ }
+ }).catch(error => {
+ reject(error)
+ })
+ })
+ },
// user logout
logout({ commit, state }) {
return new Promise((resolve, reject) => {
- // logout(state.token).then(() => {
+ const usercode = getCookie('navTabId')
+ const username = getCookie('admin')
+ const usertype = getCookie('usertype')
+ const userid = getCookie('userid')
const data = {
- usercode: getCookie('navTabId'),
- username: getCookie('admin'),
- usertype: getCookie('usertype')
+ usercode,
+ username,
+ usertype,
+ userid
}
logout(data).then(res => {
@@ -90,9 +111,10 @@
removeCookie('admin')
removeCookie('navTabId')
removeCookie('usertype')
- this.$message.success('閫�鍑烘垚鍔燂紒')
+ removeCookie('userid')
}
commit('RESET_STATE')
+
resolve()
}).catch(error => {
reject(error)
diff --git a/src/views/login/index.vue b/src/views/login/index.vue
index c0212f9..4242fb5 100644
--- a/src/views/login/index.vue
+++ b/src/views/login/index.vue
@@ -155,7 +155,7 @@
}
return {
loginForm: {
- username: '寮犱笁', // Admin
+ username: 'Admin', // Admin
password: '123456'// 123456
},
loginRules: {
--
Gitblit v1.9.3