子菜单

src/components/Home.vue

@@ -13,20 +13,20 @@
           background-color="#313743"
           text-color="#fff"
           active-text-color="#ffd04b">
-          <el-submenu index="1">
+          <el-submenu :index="item.id + ''" v-for="item in menuList" :key="item.id">
             <!-- 一级菜单模板 -->
             <template slot="title">
               <!--图标-->
               <i class="el-icon-location"></i>
               <!--文本-->
-              <span>导航一</span>
+              <span>{{item.authName}}</span>
             </template>
             <!--二级菜单-->
-            <el-menu-item index="1-4-1">
+            <el-menu-item :index="subitem.id+''" v-for="subitem in item.children " :key="subitem.id + ''">
               <!--图标-->
               <i class="el-icon-location"></i>
               <!--文本-->
-              <span>导航一</span>
+              <span>{{subitem.authName}}</span>
             </el-menu-item>
           </el-submenu>
         </el-menu>
@@ -40,11 +40,26 @@
 <script>
 export default {
   name: 'Home',
+  data () {
+    return {
+      menuList: []
+    }
+  },
   methods: {
     logout () {
       sessionStorage.clear()
       this.$router.push('/login')
+    },
+    async getMenuList () {
+      const { data: res } = await this.$http.get('menus')
+      if (res.meta.status !== 200) {
+        return this.$message.error(res.meta.msg)
       }
+      this.menuList = res.data
+    }
+  },
+  created () {
+    this.getMenuList()
   }
 }
 </script>

src/main.js

@@ -8,6 +8,10 @@ import './assets/css/globel.css'
 import axios from 'axios'
 
 axios.defaults.baseURL = 'http://127.0.0.1:8888/api/private/v1/'
+axios.interceptors.request.use(config => {
+  config.headers.Authorization = sessionStorage.getItem('token')
+  return config
+})
 Vue.prototype.$http = axios
 Vue.use(ElementUI)