菜单路由动态加载

web/src/main.js

@@ -10,7 +10,9 @@ import store from '@/store/index'
 // 菜单和路由设置
 import router from './router'
 import { frameInRoutes } from '@/router/routes'
+import util from '@/libs/util'
 import { uniqueId } from 'lodash'
+import api from '@/api'
 
 // 核心插件
 Vue.use(d2Admin)
@@ -30,22 +32,81 @@ function supplementPath (menu) {
   }))
 }
 
+async function flushMenus () {
+  let menuData = [{ path: '/index', title: '首页', icon: 'home' }]
+  try {
+    console.log('========= 设置菜单 ======== ')
+    const menuTree = await api.queryAllMenus({})
+    // 权限菜单
+    const d2adminMenus = []
+    if (menuTree && menuTree.length > 0) {
+      for (const menuItem of menuTree) {
+        let menuTemp
+        // 一级
+        if (menuItem.menuPath) {
+          menuTemp = { id: menuItem.id, title: menuItem.menuTitle, ico: menuItem.menuIcon, path: menuItem.menuPath }
+        } else {
+          // path不能为undefined会报错, 详情看源码'src/layout/header-aside/components/libs/util.menu.js'
+          menuTemp = { id: menuItem.id, title: menuItem.menuTitle, ico: menuItem.menuIcon, path: '' }
+        }
+        // 二级
+        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 {
+              menuTemp.children = []
+              menuTemp.children.push(childrenMenuTemp)
+            }
+          }
+        }
+        d2adminMenus.push(menuTemp)
+      }
+    }
+    // 拼合菜单
+    menuData = menuData.concat(d2adminMenus)
+    return menuData
+  } catch (e) {
+    console.error(e)
+    return menuData
+  }
+}
+
+async function flushRouter(){
+  const menuTree = await api.queryAllMenus({})
+  // 权限路由
+}
+
 new Vue({
   router,
   store,
   i18n,
   render: h => h(App),
   created () {
-    // 处理路由 得到每一级的路由设置
-    this.$store.commit('d2admin/page/init', frameInRoutes)
+    console.log('=========================== app created ===========================')
+    const _this = this
+    flushMenus().then((data) => {
       // 设置顶栏菜单
-    this.$store.commit('d2admin/menu/headerSet', supplementPath([]))
+      _this.$store.commit('d2admin/menu/headerSet', supplementPath([]))
       // 设置侧边栏菜单
-    this.$store.commit('d2admin/menu/asideSet', supplementPath([]))
+      _this.$store.commit('d2admin/menu/asideSet', supplementPath(data))
       // 初始化菜单搜索功能
-    this.$store.commit('d2admin/search/init', supplementPath([]))
+      _this.$store.commit('d2admin/search/init', supplementPath(data))
+    })
+    flushRouter().then((data) => {
+      // 处理路由 得到每一级的路由设置
+      _this.$store.commit('d2admin/page/init', frameInRoutes)
+    })
   },
   mounted () {
+    console.log('=========================== app mounted ===========================')
     // 展示系统信息
     this.$store.commit('d2admin/releases/versionShow')
     // 用户登录后从数据库加载一系列的设置

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

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

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

@@ -175,8 +175,7 @@ export default {
           // 具体需要传递的数据请自行修改代码
           this.login({
             username: this.formLogin.username,
-            password: this.formLogin.password,
-            callback: this.loginSuccessCallback
+            password: this.formLogin.password
           })
             .then(() => {
               // 重定向对象不存在则返回顶层路径
@@ -187,41 +186,6 @@ export default {
           this.$message.error('表单校验失败，请检查')
         }
       })
-    },
-    loginSuccessCallback (menuTree) {
-      let menuData = [{ path: '/index', title: '首页', icon: 'home' }]
-      // 权限菜单
-      const d2adminMenus = []
-      if (menuTree && menuTree.length > 0) {
-        for (const menuItem of menuTree) {
-          console.log('=============== menuItem ', menuItem)
-          let menuTemp
-          // 一级
-          if (menuItem.menuPath) {
-            menuTemp = { id: menuItem.id, title: menuItem.menuTitle, ico: menuItem.menuIcon, path: menuItem.menuPath }
-          } else {
-            // path不能为undefined会报错, 详情看源码'src/layout/header-aside/components/libs/util.menu.js'
-            menuTemp = { id: menuItem.id, title: menuItem.menuTitle, ico: menuItem.menuIcon, path: '' }
-          }
-          // 二级
-          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 {
-                menuTemp.children = []
-                menuTemp.children.push(childrenMenuTemp)
-              }
-            }
-          }
-          d2adminMenus.push(menuTemp)
-        }
-      }
-      // 拼合菜单
-      menuData = menuData.concat(d2adminMenus)
-      this.$store.commit('d2admin/menu/asideSet', menuData)
     }
   }
 }