'admin-21.01.26:处理各菜单导航a链接跳转、前端控制页面菜单权限等'

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: '首页',
+            isKeepAlive: true
-            isLink: '',
-            isHide: false,
-            isKeepAlive: true,
-            isAffix: true,
-            isIframe: false,
-            icon: 'iconfont icon-shouye'
         },
         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) => {
 
 // })

vue-admin-wonderful-next/src/store/index.ts

@@ -44,7 +44,8 @@ export interface RootStateTypes {
     },
     routes: Array<object>,
     caches: Array<string>,
-    tagsViewRoutes: Array<object>
+    tagsViewRoutes: Array<object>,
+    auths: Array<string>
 }
 
 export const key: InjectionKey<Store<RootStateTypes>> = Symbol()
@@ -54,7 +55,8 @@ export const store = createStore<RootStateTypes>({
         themeConfig,
         routes: [],
         caches: [],
-        tagsViewRoutes: []
+        tagsViewRoutes: [],
+        auths: []
     },
     mutations: {
         getThemeConfig(state: any, data: object) {
@@ -68,6 +70,9 @@ export const store = createStore<RootStateTypes>({
         },
         getTagsViewRoutes(state: any, data: Array<string>) {
             state.tagsViewRoutes = data
+        },
+        getAuths(state: any, data: Array<string>) {
+            state.auths = data
         }
     },
     actions: {
@@ -83,6 +88,13 @@ export const store = createStore<RootStateTypes>({
         async setTagsViewRoutes({ commit }, data: Array<string>) {
             commit('getTagsViewRoutes', data)
         },
+        setAuths({ commit }, data: Array<string>) {
+            const defaultAuthList: Array<string> = ['admin', 'btn.add', 'btn.del', 'btn.edit']
+            let authList: Array<string> = []
+            if (data && data.length > 0) authList = data
+            else authList = defaultAuthList
+            commit('getAuths', authList)
+        }
     }
 })
 

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);
     };
     // 路由过滤递归函数

vue-admin-wonderful-next/src/views/layout/component/columnsAside.vue

@@ -5,21 +5,19 @@
         <li v-for="(v,k) in columnsAsideList" :key="k" @click="onColumnsAsideMenuClick(v,k)"
           :ref="el => { if (el) columnsAsideOffsetTopRefs[k] = el }" :class="{'layout-columns-active':liIndex === k}"
           :title="v.meta.title">
-          <div class="layout-columns-aside-li-box">
+          <div class="layout-columns-aside-li-box" v-if="!v.meta.isLink || v.meta.isLink && v.meta.isIframe">
-            <template v-if="!v.meta.isLink">
+            <i :class="v.meta.icon"></i>
+            <div class="layout-columns-aside-li-box-title font12">
+              {{v.meta.title && v.meta.title.length >= 4 ? v.meta.title.substr(0,4) : v.meta.title}}
+            </div>
+          </div>
+          <div class="layout-columns-aside-li-box" v-else>
+            <a :href="v.meta.isLink" target="_blank">
               <i :class="v.meta.icon"></i>
               <div class="layout-columns-aside-li-box-title font12">
                 {{v.meta.title && v.meta.title.length >= 4 ? v.meta.title.substr(0,4) : v.meta.title}}
               </div>
-            </template>
+            </a>
-            <template v-else>
-              <a :href="v.meta.isLink" target="_blank">
-                <i :class="v.meta.icon"></i>
-                <div class="layout-columns-aside-li-box-title font12">
-                  {{v.meta.title && v.meta.title.length >= 4 ? v.meta.title.substr(0,4) : v.meta.title}}
-                </div>
-              </a>
-            </template>
           </div>
         </li>
         <div ref="columnsAsideActiveRef" :class="setColumnsAsideStyle"></div>
@@ -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);

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)

vue-admin-wonderful-next/src/views/layout/navMenu/horizontal.vue

@@ -11,10 +11,16 @@
             <SubItem :chil="val.children" />
           </el-submenu>
           <el-menu-item :index="val.path" :key="val.path" v-else>
-            <i :class="val.meta.icon ? val.meta.icon : ''"></i>
+            <template #title v-if="!val.meta.isLink || val.meta.isLink && val.meta.isIframe">
-            <template #title
+              <i :class="val.meta.icon ? val.meta.icon : ''"></i>
-              v-if="!val.meta.isLink || val.meta.isLink && val.meta.isIframe">{{ val.meta.title }}</template>
+              {{ val.meta.title }}
-            <template #title v-else><a :href="val.meta.isLink" target="_blank">{{ val.meta.title }}</a></template>
+            </template>
+            <template #title v-else>
+              <a :href="val.meta.isLink" target="_blank">
+                <i :class="val.meta.icon ? val.meta.icon : ''"></i>
+                {{ val.meta.title }}
+              </a>
+            </template>
           </el-menu-item>
         </template>
       </el-menu>
@@ -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%;

vue-admin-wonderful-next/src/views/layout/navMenu/subItem.vue

@@ -8,11 +8,16 @@
       <sub-item :chil="val.children" />
     </el-submenu>
     <el-menu-item :index="val.path" :key="val.path" v-else>
-      <i :class="val.meta.icon ? val.meta.icon : ''"></i>
       <template v-if="!val.meta.isLink || val.meta.isLink && val.meta.isIframe">
+        <i :class="val.meta.icon ? val.meta.icon : ''"></i>
         <span>{{ val.meta.title }}</span>
       </template>
-      <template v-else><a :href="val.meta.isLink" target="_blank">{{ val.meta.title }}</a></template>
+      <template v-else>
+        <a :href="val.meta.isLink" target="_blank">
+          <i :class="val.meta.icon ? val.meta.icon : ''"></i>
+          {{ val.meta.title }}
+        </a>
+      </template>
     </el-menu-item>
   </template>
 </template>

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";