动态菜单和权限

src/App.vue

@@ -8,31 +8,6 @@
 import store from './store'
 
 export default {
-  name: 'App',
-  created() {
-    this.refresh()
-  },
-  methods:{
-    refresh() {
-      if (localStorage.getItem("MenuPrmStore")) {
-        store.commit('permission/SET_ROUTES',JSON.parse(localStorage.getItem("MenuPrmStore")))
-      }
-      
-      if (localStorage.getItem("roleList")) {
-        store.commit('user/SET_ROLES',JSON.parse(localStorage.getItem("roleList")))
-      }
-
-      window.addEventListener("beforeunload", () => {
-        localStorage.setItem(
-          "MenuPrmStore",
-          JSON.stringify(store.state.permission.addRoutes)
-        );
-        localStorage.setItem(
-          "roleList",
-          JSON.stringify(store.state.user.roles)
-        );
-      });
-    }
-  }
+  name: 'App'
 }
 </script>

src/layout/components/Sidebar/index.vue

@@ -12,7 +12,7 @@
         :collapse-transition="false"
         mode="vertical"
       >
-        <sidebar-item v-for="route in apiMenu" :key="route.path" :item="route" :base-path="route.path" />
+        <sidebar-item v-for="route in permission_routes" :key="route.path" :item="route" :base-path="route.path" />
       </el-menu>
     </el-scrollbar>
   </div>
@@ -24,54 +24,22 @@ import Logo from './Logo'
 import SidebarItem from './SidebarItem'
 import variables from '@/styles/variables.scss'
 import Layout from '@/layout'
+import store from '@/store'
 
 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'))
+    if (this.permission_routes.length <= 0) {
+      store.dispatch('permission/generateRoutes', [])
+    }
+    console.log('permission_routes---->', this.permission_routes)
   },
   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([

src/permission.js

@@ -27,7 +27,7 @@ router.beforeEach(async(to, from, next) => {
       NProgress.done() // hack: https://github.com/PanJiaChen/vue-element-admin/pull/2939
     } 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')//store.getters.roles && store.getters.roles.length > 0
       // const hasRoles = localStorage.getItem('accessToken')
       if (hasRoles) {
         next()
@@ -42,7 +42,6 @@ router.beforeEach(async(to, from, next) => {
           const accessRoutes = await store.dispatch('permission/generateRoutes', roles)
           // dynamically add accessible routes
           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

@@ -74,54 +74,54 @@ export const constantRoutes = [
   {
     path: '/',
     component: Layout,
-    redirect: '/dashboard',
+    redirect: '/dashboard/index',
     children: [
       {
-        path: 'dashboard',
+        path: 'dashboard/index',
         component: () => import('@/views/dashboard/index'),
         name: 'Dashboard',
         meta: { title: 'dashboard', icon: 'dashboard', affix: true }
       }
     ]
   },
-  {
-    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,
-    children: [
-      {
-        path: 'index',
-        component: () => import('@/views/documentation/index'),
-        name: 'Documentation',
-        meta: { title: 'documentation', icon: 'documentation', affix: true }
-      }
-    ]
-  },
-  {
-    path: '/guide',
-    component: Layout,
-    redirect: '/guide/index',
-    children: [
-      {
-        path: 'index',
-        component: () => import('@/views/guide/index'),
-        name: 'Guide',
-        meta: { title: 'guide', icon: 'guide', noCache: true }
-      }
-    ]
-  },
+  // {
+  //   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,
+  //   children: [
+  //     {
+  //       path: 'index',
+  //       component: () => import('@/views/documentation/index'),
+  //       name: 'Documentation',
+  //       meta: { title: 'documentation', icon: 'documentation', affix: true }
+  //     }
+  //   ]
+  // },
+  // {
+  //   path: '/guide',
+  //   component: Layout,
+  //   redirect: '/guide/index',
+  //   children: [
+  //     {
+  //       path: 'index',
+  //       component: () => import('@/views/guide/index'),
+  //       name: 'Guide',
+  //       meta: { title: 'guide', icon: 'guide', noCache: true }
+  //     }
+  //   ]
+  // },
   {
     path: '/profile',
     component: Layout,

src/store/modules/permission.js

@@ -43,7 +43,8 @@ const state = {
 const mutations = {
   SET_ROUTES: (state, routes) => {
     state.addRoutes = routes
-    state.routes = constantRoutes.concat(routes)
+    // state.routes = constantRoutes.concat(routes)
+    state.routes = routes
   }
 }
 
@@ -55,15 +56,16 @@ const mutations = {
  */
  export function generaMenu(routes, data) {
   data.forEach(item => {
+ 
     const menu = {
-      path: item.routePath,
+      path: '/' + item.routePath,
       component: Layout,
       hidden: item.show === 0, // 状态为0的隐藏
       redirect: item.routePath,
       children: [],
       name: item.name,
       meta: {
-        title: item.name,
+        title: item.metaTitle,
         icon: item.icon
       }
     }
@@ -71,7 +73,9 @@ const mutations = {
     if (item.child) {
       generaMenu(menu.children, item.child)
     }
-    routes.push(menu)
+    // if (item.routePath != 'dashboard/index') {
+      routes.push(menu)
+    // }
   })
   return routes
 }
@@ -84,7 +88,44 @@ const actions = {
       let accessedRoutes
       roles = ['admin']
       let baseInfo = JSON.parse(localStorage.getItem('baseInfo'))
-      let apiMenu = baseInfo.menu
+      // let apiMenu = baseInfo.menu---调试先写固定
+      let apiMenu = [
+        {
+            "name":"控制台",
+            "class":"",
+            "icon":"el-icon-guide",
+            "controller":"dashboard",
+            "action":"index",
+            "routePath":"dashboard/index",
+            "show":1,
+            "metaTitle": 'dashboard',
+            "child":[
+
+            ]
+        },
+        {
+            "name":"商城管理",
+            "class":"",
+            "icon":"el-icon-goods",
+            "controller":"shop",
+            "action":"",
+            "routePath":"shop",
+            "metaTitle":'shop',
+            "show":1,
+            "child":[
+                {
+                    "name":"商品列表",
+                    "class":"",
+                    "icon":"",
+                    "controller":"shop",
+                    "action":"index",
+                    "routePath":"shop/index",
+                    "show":1,
+                    "metaTitle": 'indexShop'
+                }
+            ]
+        }
+      ]
       let formatMenu = generaMenu([], apiMenu)
       accessedRoutes = formatMenu //filterAsyncRoutes(asyncRoutes, roles)
       commit('SET_ROUTES', accessedRoutes)

src/views/dashboard/index.vue

@@ -27,7 +27,7 @@ export default {
   created() {
     // console.log(this.roles)
     if (!this.roles.includes('admin')) {
-      this.currentRole = 'editorDashboard'
+      this.currentRole = 'adminDashboard'
     }
   }
 }