更新

admin/src/App.vue

@@ -6,7 +6,7 @@
                    @click="mainMenuBtnClick">
           <i class="el-icon-menu" @click="mainMenuBtnClick" @mouseover="mainMenuBtnClick"></i>
         </el-button>
-        <a class="mainLogoBtn" href="./" :style="mainLogoBtnStyle">
+        <a class="mainLogoBtn" @click="mainLogoBtnClick" :style="mainLogoBtnStyle">
           <span>
             <i>{{golbSetting.appLogoName}}</i>
           </span>
@@ -70,7 +70,7 @@
       <el-container :style="mainChildElContainerStyle">
         <el-aside v-show="elAsideShow" width="240px">
           <el-scrollbar style="height:100%;">
-            <left-menu></left-menu>
+            <left-menu :data="menu"></left-menu>
           </el-scrollbar>
         </el-aside>
         <el-container :style="mainChildElContainerStyle">
@@ -105,7 +105,7 @@
       direction="ltr">
       <div :style="leftMenuDrawerStyle">
         <el-scrollbar style="height:100%;">
-          <left-menu></left-menu>
+          <left-menu :data="menu"></left-menu>
         </el-scrollbar>
       </div>
     </el-drawer>
@@ -114,8 +114,8 @@
 
 <script>
 
+  import api_rbac from "./api/rbac";
   import glob from "./assets/js/glob";
-  import api_user from "./api/user";
   import leftMenu from "./components/leftMenu";
 
   export default {
@@ -172,6 +172,7 @@
         showSearchInput: false,
         searchInputText: null,
         userDto: {},
+        menu: [],
         elAsideShow: true,
         leftMenuDrawerShow: false,
         leftMenuDrawerStyle: {}
@@ -196,10 +197,14 @@
         //主动调用一次resize监听
         this.resizeListener();
         //检查登陆
+        glob
         glob.checkLogin();
         //获得用户信息
-        const userDtoResponse = await api_user.infoByToken(glob.getToken());
+        const userDtoResponse = await api_rbac.infoByToken(glob.getToken());
         this.userDto = userDtoResponse.data.result;
+        //获得菜单
+        const menuResponse = await api_rbac.menu();
+        this.menu = menuResponse.data.result;
       },
       //重设主题属性
       resetTheme() {
@@ -228,6 +233,10 @@
         //判断是否显示菜单栏
         this.elAsideShow = window.innerWidth > 1366 ? true : false;
       },
+      //log点击事件
+      mainLogoBtnClick() {
+        window.location.href = `${process.env.VUE_APP_ADMIN_BASE_URL}`;
+      },
       //搜索输入框显示和隐藏
       searchInputDivShowHidden() {
         this.showSearchInput = !this.showSearchInput;
@@ -235,7 +244,7 @@
       //退出登录按钮事件
       logoutBtnClick() {
         const loading = this.$loading({lock: true, text: '操作中'});
-        api_user.logout().then(response => window.location.href = '/').finally(() => loading.close());
+        api_rbac.logout().then(response => window.location.href = '/').finally(() => loading.close());
       },
       //菜单按钮点击
       mainMenuBtnClick() {

admin/src/api/rbac.js

@@ -1,5 +1,6 @@
-const api_user = {
+const api_rbac = {
   logout: () => axios.delete('/private/rbac/user/logout'),
-  infoByToken: (token = '') => axios.get('/private/rbac/user/info/by/token/' + token)
+  infoByToken: (token = '') => axios.get('/private/rbac/user/info/by/token/' + token),
+  menu: () => axios.get('/private/rbac/menu')
 };
-export default api_user;
+export default api_rbac;

admin/src/components/leftMenu.vue

@@ -1,43 +1,40 @@
 <template>
   <div class="leftMenu">
-    <el-menu background-color="#F5F5F5">
-      <el-submenu index="1">
-        <template slot="title">
-          <i class="el-icon-location"></i>
-          <span>导航一</span>
-        </template>
-        <el-menu-item-group>
-          <template slot="title">分组一</template>
-          <el-menu-item index="1-1">选项1</el-menu-item>
-          <el-menu-item index="1-2">选项2</el-menu-item>
-        </el-menu-item-group>
-        <el-menu-item-group title="分组2">
-          <el-menu-item index="1-3">选项3</el-menu-item>
-        </el-menu-item-group>
-        <el-submenu index="1-4">
-          <template slot="title">选项4</template>
-          <el-menu-item index="1-4-1">选项1</el-menu-item>
-        </el-submenu>
-      </el-submenu>
-      <el-menu-item index="2">
+    <el-menu background-color="#F5F5F5" @select="leftMenuSelect">
+      <el-menu-item index="homeabc">
         <i class="el-icon-menu"></i>
-        <span slot="title">导航二</span>
-      </el-menu-item>
-      <el-menu-item index="3" disabled>
-        <i class="el-icon-document"></i>
-        <span slot="title">导航三</span>
-      </el-menu-item>
-      <el-menu-item index="4">
-        <i class="el-icon-setting"></i>
-        <span slot="title">导航四</span>
+        <span slot="title">首页</span>
       </el-menu-item>
+      <div v-if="data">
+        <left-menu-item :data="data"></left-menu-item>
+      </div>
     </el-menu>
   </div>
 </template>
 
 <script>
+  import leftMenuItem from "./leftMenuItem";
+
   export default {
-    name: "leftMenu"
+    name: "leftMenu",
+    components: {
+      leftMenuItem
+    },
+    props: {
+      data: {
+        type: Array,
+        required: false,
+        default: () => []
+      }
+    },
+    methods: {
+      //菜单激活回调
+      leftMenuSelect(index, indexPath) {
+        if (this.$route.name !== index) {
+          this.$router.push({name: index});
+        }
+      }
+    }
   }
 </script>
 

admin/src/components/leftMenuItem.vue

@@ -0,0 +1,45 @@
+<template>
+  <div class="leftMenuItem">
+    <!-- 菜单 -->
+    <div v-for="item of data" :key="item.code">
+      <el-submenu :index="item.code">
+        <template slot="title">
+          <i :class="item.className"></i>
+          <span>{{item.name}}</span>
+        </template>
+        <!-- 子菜单 -->
+        <div v-if="item.childMenus">
+          <left-menu-item :data="item.childMenus"></left-menu-item>
+        </div>
+        <!-- 子功能 -->
+        <div v-if="item.childFunctions">
+          <div v-for="item of item.childFunctions" :key="item.code">
+            <el-menu-item :index="item.code">
+              <template slot="title">
+                <span>{{item.name}}</span>
+              </template>
+            </el-menu-item>
+          </div>
+        </div>
+      </el-submenu>
+    </div>
+  </div>
+</template>
+
+<script>
+
+  export default {
+    name: "leftMenuItem",
+    props: {
+      data: {
+        type: Array,
+        required: false,
+        default: () => []
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+
+</style>

admin/src/main.js

@@ -1,7 +1,7 @@
 // The Vue build version to load with the `import` command
 // (runtime-only or standalone) has been set in webpack.base.conf with an alias.
 import App from './App'
-import router from './router'
+import router from './router/index'
 import "babel-polyfill";
 import './assets/scss/glob.scss';
 import glob from './assets/js/glob.js';

admin/src/router/index.js

@@ -1,9 +1,16 @@
 export default new VueRouter({
+  mode: 'history',
+  base: `${process.env.VUE_APP_ADMIN_BASE_URL}`,
   routes: [
     {
       path: '/',
       name: 'home',
       component: () => import('../components/home'),
+    },
+    {
+      path: '/a/b/c',
+      name: 'homeabc',
+      component: () => import('../components/home'),
     }
   ]
-})
+});