动态菜单

.env.development

@@ -2,6 +2,6 @@
 ENV = 'development'
 
 # base api
-VUE_APP_BASE_API = ''
+VUE_APP_BASE_API = 'http://172.23.62.181:8868'
 VUE_APP_ACCESS_TOKEN_PREFIX = 'Bearer '
 

src/lang/en.js

@@ -1,5 +1,7 @@
 export default {
   route: {
+    apiShopList: '商品列表',
+    apiShopManage: '商品管理',
     dashboard: 'Dashboard',
     shop: 'Mall management',
     indexShop: 'Shop List',

src/lang/zh.js

@@ -1,5 +1,7 @@
 export default {
   route: {
+    apiShopList: '商品列表',
+    apiShopManage: '商品管理',
     dashboard: '首页',
     shop: '商城管理',
     indexShop: '商品管理',

src/layout/components/Sidebar/index.vue

@@ -12,7 +12,7 @@
         :collapse-transition="false"
         mode="vertical"
       >
-        <sidebar-item v-for="route in permission_routes" :key="route.path" :item="route" :base-path="route.path" />
+        <sidebar-item v-for="route in apiMenu" :key="route.path" :item="route" :base-path="route.path" />
       </el-menu>
     </el-scrollbar>
   </div>
@@ -23,9 +23,56 @@ import { mapGetters } from 'vuex'
 import Logo from './Logo'
 import SidebarItem from './SidebarItem'
 import variables from '@/styles/variables.scss'
+import Layout from '@/layout'
 
 export default {
   components: { SidebarItem, Logo },
+  data() {
+    return {
+      apiMenu: []
+    }
+  },
+  created(){
+    let baseInfo = JSON.parse(localStorage.getItem('baseInfo'))
+    let apiMenu = baseInfo.menu
+    let formatMenu = this.generaMenu([], apiMenu)
+    this.apiMenu = formatMenu.routes
+    console.log('apiMenu---->', this.apiMenu, this.$t('route.'+'apiShopList'))
+  },
+  methods: {
+     generaMenu(routes, data) {
+      data.forEach(item => {
+        var nameCode = ''
+        if (item.name == '商城管理') {
+          nameCode = 'apiShopManage'
+        } else if (item.name == '商品列表') {
+          nameCode = 'apiShopList'
+        } else {
+          nameCode = 'apiShopList'
+        }
+
+        const menu = {
+          path: '/'+item.routePath,
+          component: Layout,
+          hidden: item.show === 0, // 状态为0的隐藏
+          redirect: item.routePath,
+          children: [],
+          name: this.$t('route.'+nameCode),
+          nameCode,
+          meta: {
+            title: item.name, // 菜单显示的名字是这里起作用
+            icon: item.icon
+          }
+        }
+    
+        if (item.child) {
+          this.generaMenu(menu.children, item.child)
+        }
+        routes.push(menu)
+      })
+      return  { routes }
+    }
+  },
   computed: {
     ...mapGetters([
       'permission_routes',

src/permission.js

@@ -1,4 +1,4 @@
-import router, { selfAddRoutes } from './router'
+import router, { selfAddRoutes, resetRouter } from './router'
 import store from './store'
 import { Message } from 'element-ui'
 import NProgress from 'nprogress' // progress bar
@@ -28,6 +28,7 @@ router.beforeEach(async(to, from, next) => {
     } else {
       // determine whether the user has obtained his permission roles through getInfo
       const hasRoles = store.getters.roles && store.getters.roles.length > 0
+      // const hasRoles = localStorage.getItem('accessToken')
       if (hasRoles) {
         next()
       } else {
@@ -36,14 +37,12 @@ router.beforeEach(async(to, from, next) => {
           // note: roles must be a object array! such as: ['admin'] or ,['developer','editor']
           // const { roles } = await store.dispatch('user/getInfo')
           const { roles } = ['admin'];
-         
+          resetRouter()
           // generate accessible routes map based on roles
           const accessRoutes = await store.dispatch('permission/generateRoutes', roles)
           // dynamically add accessible routes
-          console.log(accessRoutes)
-          selfAddRoutes(accessRoutes)
+          router.addRoutes(accessRoutes)
           // selfAddRoutes(accessRoutes)
-
           // hack method to ensure that addRoutes is complete
           // set the replace: true, so the navigation will not leave a history record
           next({ ...to, replace: true })

src/router/index.js

@@ -84,6 +84,19 @@ export const constantRoutes = [
       }
     ]
   },
+  {
+    path: '/dashboard/index',
+    component: Layout,
+    redirect: '/dashboard',
+    children: [
+      {
+        path: 'dashboard',
+        component: () => import('@/views/dashboard/index'),
+        name: 'Dashboard',
+        meta: { title: 'dashboard', icon: 'dashboard', affix: true }
+      }
+    ]
+  },
   {
     path: '/documentation',
     component: Layout,
@@ -143,7 +156,7 @@ export const asyncRoutes = [
     },
     children: [
       {
-        path: 'index',
+        path: '/shop/index',
         component: () => import('@/views/shop/index'),
         name: 'IndexShop',
         meta: {

src/store/modules/permission.js

@@ -1,4 +1,5 @@
 import { asyncRoutes, constantRoutes } from '@/router'
+import Layout from '@/layout'
 
 /**
  * Use meta.role to determine if the current user has permission
@@ -46,13 +47,46 @@ const mutations = {
   }
 }
 
+
+/**
+ * 把从后端查询的菜单数据拼装成路由格式的数据
+ * @param routes
+ * @param data 后端返回的菜单数据
+ */
+ export function generaMenu(routes, data) {
+  data.forEach(item => {
+    const menu = {
+      path: item.routePath,
+      component: Layout,
+      hidden: item.show === 0, // 状态为0的隐藏
+      redirect: item.routePath,
+      children: [],
+      name: item.name,
+      meta: {
+        title: item.name,
+        icon: item.icon
+      }
+    }
+ 
+    if (item.child) {
+      generaMenu(menu.children, item.child)
+    }
+    routes.push(menu)
+  })
+  return routes
+}
+
+
 // 系统使用版
 const actions = {
   generateRoutes({ commit }, roles) {
     return new Promise(resolve => {
       let accessedRoutes
       roles = ['admin']
-      accessedRoutes = filterAsyncRoutes(asyncRoutes, roles)
+      let baseInfo = JSON.parse(localStorage.getItem('baseInfo'))
+      let apiMenu = baseInfo.menu
+      let formatMenu = generaMenu([], apiMenu)
+      accessedRoutes = formatMenu //filterAsyncRoutes(asyncRoutes, roles)
       commit('SET_ROUTES', accessedRoutes)
       resolve(accessedRoutes)
     })

src/views/dashboard/index.vue

@@ -25,11 +25,6 @@ export default {
     ])
   },
   created() {
-    let aa = store.getters.roles
-    console.log('first--->', aa)
-    console.log('11111111111111')
-    console.log('222222', this.roles)
-    console.log(this.permission_routes,3333)
     // console.log(this.roles)
     if (!this.roles.includes('admin')) {
       this.currentRole = 'editorDashboard'