From a66f93d59db59a4c506771ef9d04620df32a7cec Mon Sep 17 00:00:00 2001 From: lyt <1105290566@qq.com> Date: Tue, 26 Jan 2021 18:17:13 +0800 Subject: [PATCH] =?UTF-8?q?'admin-21.01.26:=E5=A4=84=E7=90=86=E5=90=84?= =?UTF-8?q?=E8=8F=9C=E5=8D=95=E5=AF=BC=E8=88=AAa=E9=93=BE=E6=8E=A5?= =?UTF-8?q?=E8=B7=B3=E8=BD=AC=E3=80=81=E5=89=8D=E7=AB=AF=E6=8E=A7=E5=88=B6?= =?UTF-8?q?=E9=A1=B5=E9=9D=A2=E8=8F=9C=E5=8D=95=E6=9D=83=E9=99=90=E7=AD=89?= =?UTF-8?q?'?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- vue-admin-wonderful-next/src/router/index.ts | 100 +++++++++++++++--- vue-admin-wonderful-next/src/store/index.ts | 16 ++- .../src/views/layout/component/aside.vue | 2 - .../views/layout/component/columnsAside.vue | 22 ++-- .../views/layout/navBars/breadcrumb/index.vue | 2 - .../src/views/layout/navMenu/horizontal.vue | 17 ++- .../src/views/layout/navMenu/subItem.vue | 9 +- .../src/views/layout/routerView/parent.vue | 1 - 8 files changed, 128 insertions(+), 41 deletions(-) diff --git a/vue-admin-wonderful-next/src/router/index.ts b/vue-admin-wonderful-next/src/router/index.ts index cd4487cc..32497d6a 100644 --- a/vue-admin-wonderful-next/src/router/index.ts +++ b/vue-admin-wonderful-next/src/router/index.ts @@ -9,13 +9,7 @@ export const dynamicRoutes = [ component: () => import('/@/views/layout/index.vue'), redirect: '/home', meta: { - title: '首页', - isLink: '', - isHide: false, - isKeepAlive: true, - isAffix: true, - isIframe: false, - icon: 'iconfont icon-shouye' + isKeepAlive: true }, children: [{ path: '/home', @@ -28,6 +22,7 @@ export const dynamicRoutes = [ isKeepAlive: true, isAffix: true, isIframe: false, + auth: ['admin', 'test'], icon: 'iconfont icon-shouye' } }, @@ -43,6 +38,7 @@ export const dynamicRoutes = [ isKeepAlive: true, isAffix: false, isIframe: false, + auth: ['admin'], icon: 'iconfont icon-xitongshezhi' }, children: [ @@ -57,6 +53,7 @@ export const dynamicRoutes = [ isKeepAlive: true, isAffix: false, isIframe: false, + auth: ['admin'], icon: 'iconfont icon-caidan' } }, @@ -71,6 +68,7 @@ export const dynamicRoutes = [ isKeepAlive: true, isAffix: false, isIframe: false, + auth: ['admin'], icon: 'iconfont icon-icon-', } } @@ -88,6 +86,7 @@ export const dynamicRoutes = [ isKeepAlive: true, isAffix: false, isIframe: false, + auth: ['admin', 'test'], icon: 'iconfont icon-quanxian' }, children: [ @@ -102,7 +101,8 @@ export const dynamicRoutes = [ isHide: false, isKeepAlive: true, isAffix: false, - isIframe: false + isIframe: false, + auth: ['admin', 'test'] }, children: [ { @@ -115,7 +115,8 @@ export const dynamicRoutes = [ isHide: false, isKeepAlive: true, isAffix: false, - isIframe: false + isIframe: false, + auth: ['admin', 'test'] } }, { @@ -128,7 +129,8 @@ export const dynamicRoutes = [ isHide: false, isKeepAlive: true, isAffix: false, - isIframe: false + isIframe: false, + auth: ['admin', 'test'] } } ] @@ -143,7 +145,8 @@ export const dynamicRoutes = [ isHide: false, isKeepAlive: true, isAffix: false, - isIframe: false + isIframe: false, + auth: ['admin', 'test'] }, children: [ { @@ -156,7 +159,8 @@ export const dynamicRoutes = [ isHide: false, isKeepAlive: true, isAffix: false, - isIframe: false + isIframe: false, + auth: ['admin', 'test'] } }, { @@ -169,7 +173,8 @@ export const dynamicRoutes = [ isHide: false, isKeepAlive: true, isAffix: false, - isIframe: false + isIframe: false, + auth: ['admin', 'test'] } } ] @@ -188,6 +193,7 @@ export const dynamicRoutes = [ isKeepAlive: true, isAffix: false, isIframe: false, + auth: ['admin', 'test'], icon: 'iconfont icon-xitongshezhi' }, children: [ @@ -203,6 +209,7 @@ export const dynamicRoutes = [ isKeepAlive: true, isAffix: false, isIframe: false, + auth: ['admin', 'test'], icon: 'iconfont icon-caidan' }, children: [ @@ -217,6 +224,7 @@ export const dynamicRoutes = [ isKeepAlive: true, isAffix: false, isIframe: false, + auth: ['admin', 'test'], icon: 'iconfont icon-caidan' } }, @@ -232,6 +240,7 @@ export const dynamicRoutes = [ isKeepAlive: true, isAffix: false, isIframe: false, + auth: ['admin', 'test'], icon: 'iconfont icon-caidan' }, children: [ @@ -246,6 +255,7 @@ export const dynamicRoutes = [ isKeepAlive: true, isAffix: false, isIframe: false, + auth: ['admin', 'test'], icon: 'iconfont icon-caidan' } }, @@ -260,6 +270,7 @@ export const dynamicRoutes = [ isKeepAlive: true, isAffix: false, isIframe: false, + auth: ['admin', 'test'], icon: 'iconfont icon-caidan' } } @@ -276,6 +287,7 @@ export const dynamicRoutes = [ isKeepAlive: true, isAffix: false, isIframe: false, + auth: ['admin', 'test'], icon: 'iconfont icon-caidan' } } @@ -292,6 +304,7 @@ export const dynamicRoutes = [ isKeepAlive: true, isAffix: false, isIframe: false, + auth: ['admin', 'test'], icon: 'iconfont icon-caidan' } } @@ -309,6 +322,7 @@ export const dynamicRoutes = [ isKeepAlive: true, isAffix: false, isIframe: false, + auth: ['admin', 'test'], icon: 'iconfont icon-crew_feature' }, children: [ @@ -323,6 +337,7 @@ export const dynamicRoutes = [ isKeepAlive: true, isAffix: false, isIframe: false, + auth: ['admin', 'test'], icon: 'el-icon-thumb' } } @@ -339,6 +354,7 @@ export const dynamicRoutes = [ isKeepAlive: true, isAffix: false, isIframe: false, + auth: ['admin', 'test'], icon: 'iconfont icon-fuzhiyemian' } }, @@ -353,6 +369,7 @@ export const dynamicRoutes = [ isKeepAlive: true, isAffix: false, isIframe: false, + auth: ['admin', 'test'], icon: 'iconfont icon-zujian' } }, @@ -367,6 +384,7 @@ export const dynamicRoutes = [ isKeepAlive: true, isAffix: false, isIframe: false, + auth: ['admin', 'test'], icon: 'iconfont icon-ico_shuju' } }, @@ -381,6 +399,7 @@ export const dynamicRoutes = [ isKeepAlive: true, isAffix: false, isIframe: false, + auth: ['admin', 'test'], icon: 'iconfont icon-gerenzhongxin' } }, @@ -395,6 +414,7 @@ export const dynamicRoutes = [ isKeepAlive: true, isAffix: false, isIframe: false, + auth: ['admin', 'test'], icon: 'iconfont icon-gongju' } }, @@ -409,6 +429,7 @@ export const dynamicRoutes = [ isKeepAlive: false, isAffix: false, isIframe: false, + auth: ['admin'], icon: 'iconfont icon-caozuo-wailian' } }, @@ -423,6 +444,7 @@ export const dynamicRoutes = [ isKeepAlive: true, isAffix: true, isIframe: true, + auth: ['admin'], icon: 'iconfont icon-neiqianshujuchucun' } }] @@ -504,16 +526,62 @@ export function setCacheTagsViewRoutes() { store.dispatch('setTagsViewRoutes', formatTwoStageRoutes(formatFlatteningRoutes(dynamicRoutes))[0].children) } +// 获取当前用户的权限去比对路由表，用于左侧菜单/横向菜单的显示 +export function setFilterMenu() { + if (store.state.auths.length <= 0) store.dispatch('setAuths') + store.dispatch("setRoutes", setFilterMenuFun(dynamicRoutes[0].children, store.state.auths)) +} + +// 判断路由 auth 中是否包含当前登录用户权限字段 +export function hasAuth(auths: any, route: any) { + if (route.meta && route.meta.auth) return auths.some((auth: any) => route.meta.auth.includes(auth)) + else return true +} + +// 递归过滤又权限的路由 +export function setFilterMenuFun(routes: any, auth: any) { + const menu: any = [] + routes.map((route: any) => { + const item = { ...route } + if (hasAuth(auth, item)) { + if (item.children) item.children = setFilterMenuFun(item.children, auth) + menu.push(item) + } + }) + return menu +} + +// 获取当前用户的权限去比对路由表，用于动态路由的添加 +export function setFilterRoute() { + if (store.state.auths.length <= 0) store.dispatch('setAuths') + let filterRoute: any = [] + formatTwoStageRoutes(formatFlatteningRoutes(dynamicRoutes))[0].children.map((route: any) => { + route.meta.auth.map((metaAuth: any) => { + store.state.auths.map((auth: any) => { + if (metaAuth === auth) filterRoute.push({ ...route }) + }) + }) + }) + return filterRoute +} + +// 比对后的路由表，进行重新赋值 +export function setFilterRouteEnd() { + let filterRouteEnd: any = formatTwoStageRoutes(formatFlatteningRoutes(dynamicRoutes)) + filterRouteEnd[0].children = setFilterRoute() + return filterRouteEnd +} + // 添加动态路由 export function setAddRoute() { - formatTwoStageRoutes(formatFlatteningRoutes(dynamicRoutes)).map((route: any) => { + setFilterRouteEnd().map((route: any) => { router.addRoute(route as RouteRecordRaw) }) } // 删除/重置路由 export function resetRoute() { - formatTwoStageRoutes(formatFlatteningRoutes(dynamicRoutes)).map((route: any) => { + setFilterRouteEnd().map((route: any) => { const { name } = route router.hasRoute(name) && router.removeRoute(name) }) @@ -521,8 +589,10 @@ export function resetRoute() { // 初始化执行函数 setAddRoute() +setFilterMenu() setCacheTagsViewRoutes() + // router.afterEach((to, from) => { // }) diff --git a/vue-admin-wonderful-next/src/store/index.ts b/vue-admin-wonderful-next/src/store/index.ts index 0d2a8613..856c004f 100644 --- a/vue-admin-wonderful-next/src/store/index.ts +++ b/vue-admin-wonderful-next/src/store/index.ts @@ -44,7 +44,8 @@ export interface RootStateTypes { }, routes: Array, caches: Array, - tagsViewRoutes: Array + tagsViewRoutes: Array, + auths: Array } export const key: InjectionKey> = Symbol() @@ -54,7 +55,8 @@ export const store = createStore({ themeConfig, routes: [], caches: [], - tagsViewRoutes: [] + tagsViewRoutes: [], + auths: [] }, mutations: { getThemeConfig(state: any, data: object) { @@ -68,6 +70,9 @@ export const store = createStore({ }, getTagsViewRoutes(state: any, data: Array) { state.tagsViewRoutes = data + }, + getAuths(state: any, data: Array) { + state.auths = data } }, actions: { @@ -83,6 +88,13 @@ export const store = createStore({ async setTagsViewRoutes({ commit }, data: Array) { commit('getTagsViewRoutes', data) }, + setAuths({ commit }, data: Array) { + const defaultAuthList: Array = ['admin', 'btn.add', 'btn.del', 'btn.edit'] + let authList: Array = [] + if (data && data.length > 0) authList = data + else authList = defaultAuthList + commit('getAuths', authList) + } } }) diff --git a/vue-admin-wonderful-next/src/views/layout/component/aside.vue b/vue-admin-wonderful-next/src/views/layout/component/aside.vue index 4184b2f5..821e12d3 100644 --- a/vue-admin-wonderful-next/src/views/layout/component/aside.vue +++ b/vue-admin-wonderful-next/src/views/layout/component/aside.vue @@ -19,7 +19,6 @@ import { onUnmounted, } from "vue"; import { useStore } from "/@/store/index.ts"; -import { dynamicRoutes } from "/@/router/index.ts"; import Logo from "/@/views/layout/logo/index.vue"; import Vertical from "/@/views/layout/navMenu/vertical.vue"; export default { @@ -34,7 +33,6 @@ export default { // 设置/过滤路由（非静态路由/是否显示在菜单中） const setFilterRoutes = () => { if (store.state.themeConfig.layout === "columns") return false; - store.dispatch("setRoutes", dynamicRoutes[0].children); state.menuList = filterRoutesFun(store.state.routes); }; // 路由过滤递归函数 diff --git a/vue-admin-wonderful-next/src/views/layout/component/columnsAside.vue b/vue-admin-wonderful-next/src/views/layout/component/columnsAside.vue index d13dfb43..4fa883b9 100644 --- a/vue-admin-wonderful-next/src/views/layout/component/columnsAside.vue +++ b/vue-admin-wonderful-next/src/views/layout/component/columnsAside.vue @@ -5,21 +5,19 @@
  • -
    - - +
    • @@ -40,7 +38,6 @@ import { } from "vue"; import { useRoute, useRouter, onBeforeRouteUpdate } from "vue-router"; import { useStore } from "/@/store/index.ts"; -import { dynamicRoutes } from "/@/router/index.ts"; export default { name: "layoutColumnsAside", setup() { @@ -88,7 +85,6 @@ export default { }; // 设置/过滤路由（非静态路由/是否显示在菜单中） const setFilterRoutes = () => { - store.dispatch("setRoutes", dynamicRoutes[0].children); state.columnsAsideList = filterRoutesFun(store.state.routes); const resData = setSendChildren(route.path); onColumnsAsideDown(resData.item[0], resData.item[0].k); diff --git a/vue-admin-wonderful-next/src/views/layout/navBars/breadcrumb/index.vue b/vue-admin-wonderful-next/src/views/layout/navBars/breadcrumb/index.vue index 99038043..199192c8 100644 --- a/vue-admin-wonderful-next/src/views/layout/navBars/breadcrumb/index.vue +++ b/vue-admin-wonderful-next/src/views/layout/navBars/breadcrumb/index.vue @@ -18,7 +18,6 @@ import { } from "vue"; import { useRoute, onBeforeRouteUpdate } from "vue-router"; import { useStore } from "/@/store/index.ts"; -import { dynamicRoutes } from "/@/router/index.ts"; import Breadcrumb from "/@/views/layout/navBars/breadcrumb/breadcrumb.vue"; import User from "/@/views/layout/navBars/breadcrumb/user.vue"; import Logo from "/@/views/layout/logo/index.vue"; @@ -55,7 +54,6 @@ export default { // 设置/过滤路由（非静态路由/是否显示在菜单中） const setFilterRoutes = () => { let { layout, isClassicSplitMenu } = store.state.themeConfig; - store.dispatch("setRoutes", dynamicRoutes[0].children); if (layout === "classic" && isClassicSplitMenu) { state.menuList = delClassicChildren( filterRoutesFun(store.state.routes) diff --git a/vue-admin-wonderful-next/src/views/layout/navMenu/horizontal.vue b/vue-admin-wonderful-next/src/views/layout/navMenu/horizontal.vue index b040e5ab..69fa4d4e 100644 --- a/vue-admin-wonderful-next/src/views/layout/navMenu/horizontal.vue +++ b/vue-admin-wonderful-next/src/views/layout/navMenu/horizontal.vue @@ -11,10 +11,16 @@ - - - + + @@ -111,6 +117,9 @@ export default defineComponent({ ::v-deep(.el-scrollbar__bar.is-vertical) { display: none; } + ::v-deep(a) { + width: 100%; + } .el-menu.el-menu--horizontal { display: flex; height: 100%; diff --git a/vue-admin-wonderful-next/src/views/layout/navMenu/subItem.vue b/vue-admin-wonderful-next/src/views/layout/navMenu/subItem.vue index bce20531..863bf01e 100644 --- a/vue-admin-wonderful-next/src/views/layout/navMenu/subItem.vue +++ b/vue-admin-wonderful-next/src/views/layout/navMenu/subItem.vue @@ -8,11 +8,16 @@ - - + diff --git a/vue-admin-wonderful-next/src/views/layout/routerView/parent.vue b/vue-admin-wonderful-next/src/views/layout/routerView/parent.vue index 824ea3ed..783f048f 100644 --- a/vue-admin-wonderful-next/src/views/layout/routerView/parent.vue +++ b/vue-admin-wonderful-next/src/views/layout/routerView/parent.vue @@ -25,7 +25,6 @@ import { import { useRoute, useRouter, - RouteRecordRaw, onBeforeRouteUpdate, } from "vue-router"; import { useStore } from "/@/store/index.ts";