菜单路由动态加载

web/src/layout/header-aside/components/menu-side/index.js

@@ -3,6 +3,9 @@ import menuMixin from '../mixin/menu'
 import { createMenu } from '../libs/util.menu'
 import BScroll from 'better-scroll'
 
+/**
+ * 渲染侧栏菜单
+ */
 export default {
   name: 'd2-layout-header-aside-menu-side',
   mixins: [

web/src/main.js

@@ -9,12 +9,27 @@ import store from '@/store/index'
 
 // 菜单和路由设置
 import router from './router'
-import { menuHeader, menuAside } from '@/menu'
 import { frameInRoutes } from '@/router/routes'
+import { uniqueId } from 'lodash'
 
 // 核心插件
 Vue.use(d2Admin)
 
+/**
+ * @description 给菜单数据补充上 path 字段
+ * @description https://github.com/d2-projects/d2-admin/issues/209
+ * @param {Array} menu 原始的菜单数据
+ */
+function supplementPath (menu) {
+  return menu.map(e => ({
+    ...e,
+    path: e.path || uniqueId('d2-menu-empty-'),
+    ...e.children ? {
+      children: supplementPath(e.children)
+    } : {}
+  }))
+}
+
 new Vue({
   router,
   store,
@@ -24,9 +39,9 @@ new Vue({
     // 处理路由 得到每一级的路由设置
     this.$store.commit('d2admin/page/init', frameInRoutes)
     // 设置顶栏菜单
-    this.$store.commit('d2admin/menu/headerSet', menuHeader)
+    this.$store.commit('d2admin/menu/headerSet', supplementPath([]))
     // 设置侧边栏菜单
-    this.$store.commit('d2admin/menu/asideSet', menuAside)
+    this.$store.commit('d2admin/menu/asideSet', supplementPath([]))
     // 初始化菜单搜索功能
     this.$store.commit('d2admin/search/init', menuHeader)
   },

web/src/menu/index.js

@@ -1,22 +0,0 @@
-import { uniqueId } from 'lodash'
-
-/**
- * @description 给菜单数据补充上 path 字段
- * @description https://github.com/d2-projects/d2-admin/issues/209
- * @param {Array} menu 原始的菜单数据
- */
-function supplementPath (menu) {
-  return menu.map(e => ({
-    ...e,
-    path: e.path || uniqueId('d2-menu-empty-'),
-    ...e.children ? {
-      children: supplementPath(e.children)
-    } : {}
-  }))
-}
-
-const menuData = []
-
-// export const menuHeader = supplementPath(menuData)
-export const menuHeader = []
-export const menuAside = supplementPath(menuData)

web/src/store/modules/d2admin/modules/account.js

@@ -16,7 +16,7 @@ export default {
     async login ({ dispatch }, {
       username = '',
       password = '',
-      callback = (defaultMenu, menuTree) => {}
+      callback = (menuTree) => {}
     } = {}) {
       const res = await api.login({ username, password })
       // 设置 cookie 一定要存 uuid 和 token 两个 cookie
@@ -30,9 +30,8 @@ export default {
       util.cookies.set('token', res.token)
       // 设置路由菜单
       console.log('========= 设置菜单 ======== ')
-      const defaultMenu = [{ path: '/index', title: '首页', icon: 'home' }]
       const menuTree = await api.queryAllMenus({})
-      callback(defaultMenu, menuTree)
+      callback(menuTree)
       // 设置 vuex 用户信息
       await dispatch('d2admin/user/set', { name: res.name }, { root: true })
       // 用户登录后从持久化数据加载一系列的设置

web/src/views/system/login/page.vue

@@ -188,21 +188,26 @@ export default {
         }
       })
     },
-    loginSuccessCallback (defaultMenu, menuTree) {
-      let menuData = []
-      const rootMenu = []
+    loginSuccessCallback (menuTree) {
+      let menuData = [{ path: '/index', title: '首页', icon: 'home' }]
+      // 权限菜单
+      const d2adminMenus = []
       if (menuTree && menuTree.length > 0) {
-        for (const menuItem in menuTree) {
+        for (const menuItem of menuTree) {
+          console.log('=============== menuItem ', menuItem)
           let menuTemp
-          // 暂时只解析两层
+          // 一级
           if (menuItem.menuPath) {
-            menuTemp = { title: menuItem.menuTitle, ico: menuItem.menuIcon, path: menuItem.menuPath }
+            menuTemp = { id: menuItem.id, title: menuItem.menuTitle, ico: menuItem.menuIcon, path: menuItem.menuPath }
           } else {
-            menuTemp = { title: menuItem.menuTitle, ico: menuItem.menuIcon }
+            // path不能为undefined会报错, 详情看源码'src/layout/header-aside/components/libs/util.menu.js'
+            menuTemp = { id: menuItem.id, title: menuItem.menuTitle, ico: menuItem.menuIcon, path: '' }
           }
-          if (menuItem.children && menuItem.children.length > 0) {
-            for (const childrenMenuItem in menuItem.children) {
-              const childrenMenuTemp = { title: childrenMenuItem.menuTitle, ico: childrenMenuItem.menuIcon, path: childrenMenuItem.menuPath }
+          // 二级
+          const children = menuItem.children;
+          if (children && children.length > 0) {
+            for (const childrenMenuItem of children) {
+              const childrenMenuTemp = { id: menuItem.id, title: childrenMenuItem.menuTitle, ico: childrenMenuItem.menuIcon, path: childrenMenuItem.menuPath }
               if (menuTemp.children && menuTemp.children.length > 0) {
                 menuTemp.children.push(childrenMenuTemp)
               } else {
@@ -211,11 +216,11 @@ export default {
               }
             }
           }
-          rootMenu.push(menuTemp)
+          d2adminMenus.push(menuTemp)
         }
       }
-      menuData = menuData.concat(defaultMenu)
-      menuData = menuData.concat(rootMenu)
+      // 拼合菜单
+      menuData = menuData.concat(d2adminMenus)
       this.$store.commit('d2admin/menu/asideSet', menuData)
     }
   }