feat: add function of filtering menu data through authority; ⭐

新增：增加通过权限过滤菜单数据的功能；

src/config/default/setting.config.js

@@ -18,6 +18,7 @@ module.exports = {
   copyright: '2018 ICZER 工作室出品',     //copyright
   asyncRoutes: false,                   //异步加载路由，true:开启，false:不开启
   showPageTitle: true,                  //是否显示页面标题（PageLayout 布局中的页面标题），true:显示，false:不显示
+  filterMenu: true,                    //根据权限过滤菜单，true:过滤，false:不过滤
   animate: {                            //动画设置
     disabled: false,                    //禁用动画，true:禁用，false:启用
     name: 'bounce',                     //动画效果，支持的动画效果可参考 ./animate.config.js

src/layouts/AdminLayout.vue

@@ -56,8 +56,8 @@ export default {
   },
   computed: {
     ...mapState('setting', ['isMobile', 'theme', 'layout', 'footerLinks', 'copyright', 'fixedHeader', 'fixedSideBar',
-      'hideSetting', 'menuData']),
-    ...mapGetters('setting', ['firstMenu', 'subMenu']),
+      'hideSetting']),
+    ...mapGetters('setting', ['firstMenu', 'subMenu', 'menuData']),
     sideMenuWidth() {
       return this.collapsed ? '80px' : '256px'
     },

src/store/modules/setting.js

@@ -1,6 +1,8 @@
 import config from '@/config'
 import {ADMIN} from '@/config/default'
 import {formatFullPath} from '@/utils/i18n'
+import {filterMenu} from '@/utils/authority-utils'
+
 export default {
   namespaced: true,
   state: {
@@ -13,6 +15,13 @@ export default {
     ...config,
   },
   getters: {
+    menuData(state, getters, rootState) {
+      if (state.filterMenu) {
+        const {permissions, roles} = rootState.account
+        filterMenu(state.menuData, permissions, roles)
+      }
+      return state.menuData
+    },
     firstMenu(state) {
       const {menuData} = state
       if (!menuData[0].fullPath) {
@@ -30,7 +39,7 @@ export default {
         formatFullPath(menuData)
       }
       const current = menuData.find(menu => menu.fullPath === activatedFirst)
-      return current ? current.children : []
+      return current && current.children ? current.children : []
     }
   },
   mutations: {

src/utils/authority-utils.js

@@ -47,4 +47,19 @@ function hasAnyRole(required, roles) {
   }
 }
 
-export {hasPermission, hasRole}
+/**
+ * 根据权限配置过滤菜单数据
+ * @param menuData
+ * @param permissions
+ * @param roles
+ */
+function filterMenu(menuData, permissions, roles) {
+  menuData.forEach(menu => {
+    menu.meta.invisible = !hasPermission(menu, permissions) && !hasRole(menu, roles)
+    if (menu.children && menu.children.length > 0) {
+      filterMenu(menu.children, permissions, roles)
+    }
+  })
+}
+
+export {hasPermission, hasRole, filterMenu}