feat: # 分角色登陆 // TODO 上方菜单搬运下方，在meta追加roles

src/router/index.js

@@ -60,107 +60,110 @@ export const constantRoutes = [
     ]
   },
 
-  {
-    path: '/statistics',
-    component: Layout,
-    redirect: '/statistics/DownloadImage',
-    name: '数据统计',
-    meta: {
-      title: '数据统计',
-      icon: 'el-icon-s-help'
-    },
-    children: [
-      {
-        path: 'DownloadImage',
-        name: '下载照片',
-        component: () => import('@/views/statistics/downloadImage/index'),
-        meta: {
-          title: '下载照片'
-          // icon: 'table'
-        }
-      },
-      {
-        path: 'UploadImage',
-        name: '上传照片',
-        component: () => import('@/views/statistics/uploadImage/index'),
-        meta: {
-          title: '上传照片'
-          // icon: 'tree'
-        }
-      },
-      {
-        path: 'WithdrawalRecord',
-        name: '提现记录',
-        component: () => import('@/views/statistics/withdrawalRecord/index'),
-        meta: {
-          title: '提现记录'
-          // icon: 'tree'
-        }
-      }
-    ]
-  },
+  // {
+  //   path: '/statistics',
+  //   component: Layout,
+  //   redirect: '/statistics/DownloadImage',
+  //   name: '数据统计',
+  //   meta: {
+  //     title: '数据统计',
+  //     icon: 'el-icon-s-help'
+  //   },
+  //   children: [
+  //     {
+  //       path: 'DownloadImage',
+  //       name: '下载照片',
+  //       component: () => import('@/views/statistics/downloadImage/index'),
+  //       meta: {
+  //         title: '下载照片'
+  //         // icon: 'table'
+  //       }
+  //     },
+  //     {
+  //       path: 'UploadImage',
+  //       name: '上传照片',
+  //       component: () => import('@/views/statistics/uploadImage/index'),
+  //       meta: {
+  //         title: '上传照片'
+  //         // icon: 'tree'
+  //       }
+  //     },
+  //     {
+  //       path: 'WithdrawalRecord',
+  //       name: '提现记录',
+  //       component: () => import('@/views/statistics/withdrawalRecord/index'),
+  //       meta: {
+  //         title: '提现记录'
+  //         // icon: 'tree'
+  //       }
+  //     }
+  //   ]
+  // },
 
-  {
-    path: '/photographerManagement',
-    component: Layout,
-    redirect: '/photographerManagement/PhotoVerify',
-    name: '摄影师',
-    meta: {
-      title: '摄影师',
-      icon: 'el-icon-s-help'
-    },
-    children: [
-      {
-        path: 'PhotoVerify',
-        name: '摄影师', // add by 梁展鹏 20210723 因为只有一个菜单，所以暂时把菜单名称写到这里。实际上这里是"照片管理"
-        component: () => import('@/views/photographerManagement/photoVerify/index'),
-        meta: {
-          title: '摄影师'
-          // icon: 'tree'
-        }
-      }
-    ]
-  },
+  // {
+  //   path: '/photographerManagement',
+  //   component: Layout,
+  //   redirect: '/photographerManagement/PhotoVerify',
+  //   name: '摄影师',
+  //   meta: {
+  //     title: '摄影师',
+  //     icon: 'el-icon-s-help'
+  //   },
+  //   children: [
+  //     {
+  //       path: 'PhotoVerify',
+  //       name: '摄影师', // add by 梁展鹏 20210723 因为只有一个菜单，所以暂时把菜单名称写到这里。实际上这里是"照片管理"
+  //       component: () =>
+  //         import('@/views/photographerManagement/photoVerify/index'),
+  //       meta: {
+  //         title: '摄影师'
+  //         // icon: 'tree'
+  //       }
+  //     }
+  //   ]
+  // },
 
-  {
-    path: '/photoManagement',
-    component: Layout,
-    redirect: '/photoManagement/ImageGoodsManagement',
-    name: '图片库管理',
-    meta: {
-      title: '图片库管理',
-      icon: 'el-icon-s-help'
-    },
-    children: [
-      {
-        path: 'EventsList',
-        name: '活动列表',
-        component: () => import('@/views/photoManagement/eventsList/index'),
-        meta: {
-          title: '活动列表'
-          // icon: 'tree'
-        }
-      },
-      {
-        path: 'ImageGoodsManagement',
-        name: '照片商品管理',
-        component: () => import('@/views/photoManagement/imageGoodsManagement/index'),
-        meta: {
-          title: '照片商品管理'
-          // icon: 'table'
-        }
-      },
-      {
-        path: 'PhotoVerifyManagement',
-        name: '上传照片审核',
-        component: () => import('@/views/photoManagement/photoVerifyManagement/index'),
-        meta: {
-          title: '上传照片审核'
-          // icon: 'tree'
-        }
-      }
-    ]
-  },
+  // {
+  //   path: '/photoManagement',
+  //   component: Layout,
+  //   redirect: '/photoManagement/ImageGoodsManagement',
+  //   name: '图片库管理',
+  //   meta: {
+  //     title: '图片库管理',
+  //     icon: 'el-icon-s-help'
+  //   },
+  //   children: [
+  //     {
+  //       path: 'EventsList',
+  //       name: '活动列表',
+  //       component: () => import('@/views/photoManagement/eventsList/index'),
+  //       meta: {
+  //         title: '活动列表'
+  //         // icon: 'tree'
+  //       }
+  //     },
+  //     {
+  //       path: 'ImageGoodsManagement',
+  //       name: '照片商品管理',
+  //       component: () =>
+  //         import('@/views/photoManagement/imageGoodsManagement/index'),
+  //       meta: {
+  //         title: '照片商品管理'
+  //         // icon: 'table'
+  //       }
+  //     },
+  //     {
+  //       path: 'PhotoVerifyManagement',
+  //       name: '上传照片审核',
+  //       component: () =>
+  //         import('@/views/photoManagement/photoVerifyManagement/index'),
+  //       meta: {
+  //         title: '上传照片审核'
+  //         // icon: 'tree'
+  //       }
+  //     }
+  //   ]
+  // },
 
   {
     path: '/certification-management',
@@ -175,7 +178,8 @@ export const constantRoutes = [
       {
         path: 'PhotographerVerify',
         name: '摄影师认证审核',
-        component: () => import('@/views/photographerManagement/photographerVerify/index'),
+        component: () =>
+          import('@/views/photographerManagement/photographerVerify/index'),
         meta: {
           title: '摄影师认证审核'
           // icon: 'table'
@@ -246,7 +250,8 @@ export const constantRoutes = [
       {
         path: 'OrderManagement',
         name: '订单列表',
-        component: () => import('@/views/financialManagement/orderManagement/index'),
+        component: () =>
+          import('@/views/financialManagement/orderManagement/index'),
         meta: {
           title: '订单列表'
           // icon: 'table'
@@ -317,7 +322,8 @@ export const constantRoutes = [
       {
         path: 'BannerManagement',
         name: 'Banner管理',
-        component: () => import('@/views/baseManagement/bannerManagement/index'),
+        component: () =>
+          import('@/views/baseManagement/bannerManagement/index'),
         meta: {
           title: 'Banner管理'
           // icon: 'table'
@@ -335,7 +341,8 @@ export const constantRoutes = [
       {
         path: 'ProblemFeedbackManagement',
         name: '问题管理',
-        component: () => import('@/views/baseManagement/problemFeedbackManagement/index'),
+        component: () =>
+          import('@/views/baseManagement/problemFeedbackManagement/index'),
         meta: {
           title: '问题管理'
           // icon: 'tree'
@@ -357,7 +364,8 @@ export const constantRoutes = [
       {
         path: 'AccountManagement',
         name: '账号列表',
-        component: () => import('@/views/systemManagement/accountManagement/index'),
+        component: () =>
+          import('@/views/systemManagement/accountManagement/index'),
         meta: {
           title: '账号列表'
           // icon: 'table'
@@ -366,7 +374,8 @@ export const constantRoutes = [
       {
         path: 'RoleManagement',
         name: '角色列表',
-        component: () => import('@/views/systemManagement/roleManagement/index'),
+        component: () =>
+          import('@/views/systemManagement/roleManagement/index'),
         meta: {
           title: '角色列表'
           // icon: 'tree'
@@ -414,11 +423,121 @@ export const constantRoutes = [
   }
 ];
 
+// TODO 上方菜单搬运下方，在meta追加roles
 /**
  * asyncRoutes
  * the routes that need to be dynamically loaded based on user roles
  */
 export const asyncRoutes = [
+  {
+    path: '/statistics',
+    component: Layout,
+    redirect: '/statistics/DownloadImage',
+    name: '数据统计',
+    meta: {
+      title: '数据统计',
+      icon: 'el-icon-s-help',
+      roles: ['admin', 'editor'] // you can set roles in root nav
+    },
+    children: [
+      {
+        path: 'DownloadImage',
+        name: '下载照片',
+        component: () => import('@/views/statistics/downloadImage/index'),
+        meta: {
+          title: '下载照片',
+          // icon: 'table'
+          roles: ['admin'] // or you can only set roles in sub nav
+        }
+      },
+      {
+        path: 'UploadImage',
+        name: '上传照片',
+        component: () => import('@/views/statistics/uploadImage/index'),
+        meta: {
+          title: '上传照片',
+          // icon: 'tree'
+          roles: ['admin'] // or you can only set roles in sub nav
+        }
+      },
+      {
+        path: 'WithdrawalRecord',
+        name: '提现记录',
+        component: () => import('@/views/statistics/withdrawalRecord/index'),
+        meta: {
+          title: '提现记录'
+          // icon: 'tree'
+        }
+      }
+    ]
+  },
+
+  {
+    path: '/photographerManagement',
+    component: Layout,
+    redirect: '/photographerManagement/PhotoVerify',
+    name: '摄影师',
+    meta: {
+      title: '摄影师',
+      icon: 'el-icon-s-help',
+      roles: ['admin', 'editor', 'photoer'] // you can set roles in root nav
+    },
+    children: [
+      {
+        path: 'PhotoVerify',
+        name: '摄影师', // add by 梁展鹏 20210723 因为只有一个菜单，所以暂时把菜单名称写到这里。实际上这里是"照片管理"
+        component: () =>
+          import('@/views/photographerManagement/photoVerify/index'),
+        meta: {
+          title: '摄影师'
+          // icon: 'tree'
+        }
+      }
+    ]
+  },
+
+  {
+    path: '/photoManagement',
+    component: Layout,
+    redirect: '/photoManagement/ImageGoodsManagement',
+    name: '图片库管理',
+    meta: {
+      title: '图片库管理',
+      icon: 'el-icon-s-help',
+      roles: ['admin'] // you can set roles in root nav
+    },
+    children: [
+      {
+        path: 'EventsList',
+        name: '活动列表',
+        component: () => import('@/views/photoManagement/eventsList/index'),
+        meta: {
+          title: '活动列表'
+          // icon: 'tree'
+        }
+      },
+      {
+        path: 'ImageGoodsManagement',
+        name: '照片商品管理',
+        component: () =>
+          import('@/views/photoManagement/imageGoodsManagement/index'),
+        meta: {
+          title: '照片商品管理'
+          // icon: 'table'
+        }
+      },
+      {
+        path: 'PhotoVerifyManagement',
+        name: '上传照片审核',
+        component: () =>
+          import('@/views/photoManagement/photoVerifyManagement/index'),
+        meta: {
+          title: '上传照片审核'
+          // icon: 'tree'
+        }
+      }
+    ]
+  }
 ];
 
 const createRouter = () =>

src/store/modules/permission.js

@@ -48,8 +48,11 @@ const mutations = {
 
 const actions = {
   generateRoutes({ commit }, roles) {
+    console.error(roles);
     return new Promise(resolve => {
-      let accessedRoutes = asyncRoutes;
+      // let accessedRoutes = asyncRoutes;
+      let accessedRoutes = filterAsyncRoutes(asyncRoutes, roles);
+
       // commit('SET_ROUTES', []);
       commit('SET_ROUTES', accessedRoutes);
       resolve(accessedRoutes);