Pass nested settings routes to GenerateRoutes and save them in state

src/router/index.js

@@ -9,15 +9,16 @@ import Layout from '@/views/layout/Layout'
 const disabledFeatures = process.env.DISABLED_FEATURES || []
 const settingsDisabled = disabledFeatures.includes('settings')
 const settingsChildren = () => {
-  const items = localStorage.getItem('settingsTabs') || []
+  return localStorage.getItem('settingsTabs')
-  return JSON.parse(items).map(({ label, value }) => {
+    ? JSON.parse(localStorage.getItem('settingsTabs')).map(({ label, value }) => {
-    return {
+      return {
-      path: value,
+        path: value,
-      component: () => import(`@/views/settings/components/${label}`),
+        component: () => import(`@/views/settings/components/${label}`),
-      name: label,
+        name: label,
-      meta: { title: label }
+        meta: { title: label }
-    }
+      }
-  })
+    })
+    : []
 }
 const settings = {
   path: '/settings',

src/store/modules/permission.js

@@ -40,23 +40,48 @@ const permission = {
     addRouters: []
   },
   mutations: {
-    SET_ROUTERS: (state, routers) => {
+    SET_ADD_ROUTERS: (state, routers) => {
       state.addRouters = routers
-      state.routers = constantRouterMap.concat(routers)
+    },
+    SET_ROUTERS: (state, routers) => {
+      state.routers = routers
     }
   },
   actions: {
-    GenerateRoutes({ commit }, data) {
+    GenerateRoutes({ commit }, { roles, routes }) {
       return new Promise(resolve => {
-        const { roles } = data
+        if (!routes) {
-        let accessedRouters
+          let accessedRouters
-        if (roles.includes('admin')) {
+          if (roles.includes('admin')) {
-          accessedRouters = asyncRouterMap
+            accessedRouters = asyncRouterMap
+          } else {
+            accessedRouters = filterAsyncRouter(asyncRouterMap, roles)
+          }
+          commit('SET_ADD_ROUTERS', accessedRouters)
+          commit('SET_ROUTERS', constantRouterMap.concat(accessedRouters))
+          resolve()
         } else {
-          accessedRouters = filterAsyncRouter(asyncRouterMap, roles)
+          const updRoutes = routes.reduce((acc, element) => {
+            if (acc.findIndex(route => route.path === element.path) !== -1) {
+              return acc
+            } else if (element.parent) {
+              const index = acc.findIndex(route => route.path === element.parent.path)
+              if (index > -1) {
+                const children = acc[index].children ? [...acc[index].children, element] : [element]
+                acc[index] = { ...acc[index], children }
+                return acc
+              } else {
+                const newRoute = { ...element.parent, children: [element] }
+                return [...acc, newRoute]
+              }
+            } else {
+              return [...acc, element]
+            }
+          }, [])
+
+          commit('SET_ROUTERS', updRoutes)
+          resolve()
         }
-        commit('SET_ROUTERS', accessedRouters)
-        resolve()
       })
     }
   }

src/views/layout/components/Sidebar/SidebarItem.vue

@@ -91,7 +91,6 @@ export default {
   methods: {
     hasOneShowingChild(children, parent) {
       if (parent.hasSubmenu) {
-        console.log(children)
         return false
       }
 

src/views/layout/components/Sidebar/index.vue

@@ -18,13 +18,14 @@
 import { mapGetters } from 'vuex'
 import SidebarItem from './SidebarItem'
 import variables from '@/styles/variables.scss'
-// import router from '@/router'
+import router from '@/router'
 
 export default {
   components: { SidebarItem },
   computed: {
     ...mapGetters([
       'permission_routers',
+      'roles',
       'sidebar',
       'tabs'
     ]),
@@ -41,20 +42,22 @@ export default {
   methods: {
     async handleOpen($event) {
       if ($event === '/settings') {
-        let items = localStorage.getItem('settingsTabs')
+        if (!localStorage.getItem('settingsTabs')) {
-        if (!items) {
           await this.$store.dispatch('FetchSettings')
-          items = this.tabs
+          const menuItems = this.tabs
-          localStorage.setItem('settingsTabs', JSON.stringify(items))
+          localStorage.setItem('settingsTabs', JSON.stringify(menuItems))
+
+          menuItems.forEach(({ label, value }) => {
+            router.addRoute('Settings', {
+              path: value,
+              component: () => import(`@/views/settings/components/${label}`),
+              name: label,
+              meta: { title: label }
+            })
+          })
+          const routes = router.getRoutes().filter(item => !item.hidden)
+          this.$store.dispatch('GenerateRoutes', { roles: this.roles, routes })
         }
-        JSON.parse(items).forEach(item => {
-          // router.addRoute('Settings', [{
-          //   path: item.value,
-          //   component: {
-          //     template: '<span>Ioio</span>'
-          //   }
-          // }])
-        })
       }
     }
   }