整合服务模式和客户端模式

plub/menu.js

@@ -27,14 +27,29 @@ export default [
   },
   {
     name: 'VPN管理',
+    profile: 'client',
     children: [
       {
         name: 'SSLVPN',
-        path: '/advancedConfig/sslvpn'
+        path: '/advancedConfig/sslClient'
       },
       {
         name: 'IPSecVpn',
-        path: '/advancedConfig/ipsecvpn'
+        path: '/advancedConfig/ipsecClient'
+      }
+    ]
+  },
+  {
+    name: 'VPN管理',
+    profile: 'server',
+    children: [
+      {
+        name: 'SSLVPN',
+        path: '/advancedConfig/sslServer'
+      },
+      {
+        name: 'IPSecVpn',
+        path: '/advancedConfig/ipsecServer'
       }
     ]
   },

src/router/index.js

@@ -87,12 +87,22 @@ const routes = [
           {
             path: 'sslClient',
             name: 'sslClient',
-            component: states === '0' ? sslClient : sslServer
+            component: sslClient
+          },
+          {
+            path: 'sslServer',
+            name: 'sslServer',
+            component: sslServer
           },
           {
             path: 'ipsecClient',
             name: 'ipsecClient',
-            component: states === '0' ? ipsecClient : ipsecServer
+            component: ipsecClient
+          },
+          {
+            path: 'ipsecServer',
+            name: 'ipsecServer',
+            component: ipsecServer
           },
           {
             path: 'passwd',

src/views/advancedConfig.vue

@@ -5,7 +5,7 @@
     </el-header>
     <el-main class="main">
       <el-menu :default-active="defaultActive" :unique-opened="true" class="el-menu-vertical-demo menu">
-        <el-submenu :index="String(index)" v-for="(item, index) in menu" :key="index">
+        <el-submenu :index="String(index)" v-for="(item, index) in menus" :key="index">
           <template slot="title">
             <span>{{ item.name }}</span>
           </template>
@@ -19,12 +19,13 @@
 
 <script>
 import menu from '../../plub/menu'
+import { mapState } from 'vuex'
+
 export default {
   name: 'advancedConfig',
   components: {},
   data () {
     return {
-      menu,
       defaultActive: '0-0'
     }
   },
@@ -32,6 +33,12 @@ export default {
     // this.defaultActive = sessionStorage.getItem('menu') || '0-0'//
     this.defaultActive = this.$route.path
   },
+  computed: {
+    ...mapState(['devinfo']),
+    menus () {
+      return menu.filter(item => item.profile === undefined || item.profile === this.devinfo?.profile)
+    }
+  },
   methods: {
     handleOpen (e, i) {
       // sessionStorage.setItem('menu', i)

src/views/devinfo.vue

@@ -53,7 +53,7 @@ export default {
     }
   },
   async mounted () {
-    await this.getdevinfo()
+    // await this.getdevinfo()
     await this.getvpnstate()
     await this.getcpu()
     await this.getmemory()

src/views/home.vue

@@ -14,7 +14,7 @@
 </template>
 
 <script>
-// import { mapActions } from 'vuex'
+import { mapActions } from 'vuex'
 // mapState
 export default {
   name: 'home',
@@ -24,10 +24,12 @@ export default {
       activeIndex: '1'
     }
   },
-  mounted () {
+  async mounted () {
     this.activeIndex = sessionStorage.getItem('tab') || '1'
+    await this.getdevinfo()
   },
   methods: {
+    ...mapActions(['getdevinfo']),
     handleSelect (key, keyPath) {
       if (key === '1' && this.$route.path !== '/devinfo') {
         // sessionStorage.removeItem('tab')