feat: 添加菜单权限

base-manager-ui/admin/src/main.js

@@ -63,7 +63,6 @@ Vue.config.productionTip = false;
 // Vue.use(Viser)
 Vue.use(Plugins);
 Vue.use(VueResource);
-
 bootstrap({ router, store, i18n, message: Vue.prototype.$message });
 
 new Vue({

base-manager-ui/admin/src/router/config.js

@@ -161,6 +161,7 @@ const options = {
           name: "部署模块管理",
           meta: {
             icon: "appstore",
+            roles: ["admin"],
           },
           component: () => import("@/pages/basicset/deploy/deploy"),
         },

base-manager-ui/admin/src/router/index.js

-import Vue from 'vue'
-import Router from 'vue-router'
-import {formatRoutes} from '@/utils/routerUtil'
-
-Vue.use(Router)
+import Vue from "vue";
+import Router from "vue-router";
+import { formatRoutes } from "@/utils/routerUtil";
+import store from "@/store";
+Vue.use(Router);
 //解决重复路由报错
-const originalPush = Router.prototype.push
+const originalPush = Router.prototype.push;
 // 修改原型对象中的push方法
 Router.prototype.push = function push(location) {
-  return originalPush.call(this, location).catch(err => err)
-}
+  return originalPush.call(this, location).catch((err) => err);
+};
 
 // 不需要登录拦截的路由配置
 const loginIgnore = {
-  names: ['404', '403'],      //根据路由名称匹配
-  paths: ['/login'],   //根据路由fullPath匹配
+  names: ["404", "403"], //根据路由名称匹配
+  paths: ["/login"], //根据路由fullPath匹配
   /**
    * 判断路由是否包含在该配置中
    * @param route vue-router 的 route 对象
    * @returns {boolean}
    */
   includes(route) {
-    return this.names.includes(route.name) || this.paths.includes(route.path)
-  }
-}
+    return this.names.includes(route.name) || this.paths.includes(route.path);
+  },
+};
 
 /**
  * 初始化路由实例
@@ -30,8 +30,40 @@ const loginIgnore = {
  * @returns {VueRouter}
  */
 function initRouter(isAsync) {
-  const options = isAsync ? require('./async/config.async').default : require('./config').default
-  formatRoutes(options.routes)
-  return new Router(options)
+  let role = store.getters["site/userInfo"].name;
+  if (!role) return;
+  const options = isAsync
+    ? require("./async/config.async").default
+    : require("./config").default;
+  formatRoutes(options.routes);
+  options.routes = calcRouters(options.routes, role);
+  return new Router(options);
+}
+
+// 判断权限
+function permission(router, role) {
+  if (router.meta && router.meta.roles) {
+    return router.meta.roles.includes(role);
+  } else {
+    return true;
+  }
+}
+// 计算动态路由
+function calcRouters(dynamicRouter, role) {
+  // 过滤
+  let res = dynamicRouter.filter((v) => {
+    // 判断是否有权限访问此路由
+    if (permission(v, role)) {
+      // 判断有没有子路由
+      if (v.children) {
+        // 递归
+        v.children = calcRouters(v.children, role);
+      }
+      return true;
+    } else {
+      return false;
+    }
+  });
+  return res;
 }
-export {loginIgnore, initRouter}
+export { loginIgnore, initRouter };

base-manager-ui/admin/src/store/modules/setting.js

-import config from '@/config'
-import { ADMIN } from '@/config/default'
-import { formatFullPath } from '@/utils/i18n'
-import { filterMenu } from '@/utils/authority-utils'
-import { getLocalSetting } from '@/utils/themeUtil'
-import deepClone from 'lodash.clonedeep'
-const localSetting = getLocalSetting(true)
+import config from "@/config";
+import { ADMIN } from "@/config/default";
+import { formatFullPath } from "@/utils/i18n";
+import { filterMenu } from "@/utils/authority-utils";
+import { getLocalSetting } from "@/utils/themeUtil";
+import deepClone from "lodash.clonedeep";
+const localSetting = getLocalSetting(true);
 // console.log(localSetting)
-const customTitlesStr = sessionStorage.getItem(process.env.VUE_APP_TBAS_TITLES_KEY)
-const customTitles = (customTitlesStr && JSON.parse(customTitlesStr)) || []
+const customTitlesStr = sessionStorage.getItem(
+  process.env.VUE_APP_TBAS_TITLES_KEY
+);
+const customTitles = (customTitlesStr && JSON.parse(customTitlesStr)) || [];
 
 export default {
   namespaced: true,
@@ -20,96 +22,100 @@ export default {
     activatedFirst: undefined,
     customTitles,
     ...config,
-    ...localSetting
+    ...localSetting,
   },
   getters: {
-    menuData (state, getters, rootState) {
+    menuData(state, getters, rootState) {
       if (state.filterMenu) {
-        const { permissions, roles } = rootState.account
-        return filterMenu(deepClone(state.menuData), permissions, roles)
+        const { permissions, roles } = rootState.account;
+        console.log(permissions, roles);
+        return filterMenu(deepClone(state.menuData), permissions, roles);
       }
-      return state.menuData
+      return state.menuData;
     },
-    firstMenu (state, getters) {
-      const { menuData } = getters
+    firstMenu(state, getters) {
+      const { menuData } = getters;
       if (menuData.length > 0 && !menuData[0].fullPath) {
-        formatFullPath(menuData)
+        formatFullPath(menuData);
       }
-      return menuData.map(item => {
-        const menuItem = { ...item }
-        delete menuItem.children
-        return menuItem
-      })
-    },
-    subMenu (state) {
-      const { menuData, activatedFirst } = state
+      return menuData.map((item) => {
+        const menuItem = { ...item };
+        delete menuItem.children;
+        return menuItem;
+      });
+    },
+    subMenu(state) {
+      const { menuData, activatedFirst } = state;
       if (menuData.length > 0 && !menuData[0].fullPath) {
-        formatFullPath(menuData)
-      }
-      const current = menuData.find(menu => menu.fullPath === activatedFirst)
-      return current && current.children || []
+        formatFullPath(menuData);
       }
+      const current = menuData.find((menu) => menu.fullPath === activatedFirst);
+      return (current && current.children) || [];
+    },
   },
   mutations: {
-    setDevice (state, isMobile) {
-      state.isMobile = isMobile
+    setDevice(state, isMobile) {
+      state.isMobile = isMobile;
     },
-    setTheme (state, theme) {
+    setTheme(state, theme) {
       // console.log(theme)
-      state.theme = theme
+      state.theme = theme;
     },
-    setLayout (state, layout) {
-      state.layout = layout
+    setLayout(state, layout) {
+      state.layout = layout;
     },
-    setMultiPage (state, multiPage) {
-      state.multiPage = multiPage
+    setMultiPage(state, multiPage) {
+      state.multiPage = multiPage;
     },
-    setAnimate (state, animate) {
-      state.animate = animate
+    setAnimate(state, animate) {
+      state.animate = animate;
     },
-    setWeekMode (state, weekMode) {
-      state.weekMode = weekMode
+    setWeekMode(state, weekMode) {
+      state.weekMode = weekMode;
     },
-    setFixedHeader (state, fixedHeader) {
-      state.fixedHeader = fixedHeader
+    setFixedHeader(state, fixedHeader) {
+      state.fixedHeader = fixedHeader;
     },
-    setFixedSideBar (state, fixedSideBar) {
-      state.fixedSideBar = fixedSideBar
+    setFixedSideBar(state, fixedSideBar) {
+      state.fixedSideBar = fixedSideBar;
     },
-    setLang (state, lang) {
-      state.lang = lang
+    setLang(state, lang) {
+      state.lang = lang;
     },
-    setHideSetting (state, hideSetting) {
-      state.hideSetting = hideSetting
+    setHideSetting(state, hideSetting) {
+      state.hideSetting = hideSetting;
     },
-    correctPageMinHeight (state, minHeight) {
-      state.pageMinHeight += minHeight
+    correctPageMinHeight(state, minHeight) {
+      state.pageMinHeight += minHeight;
     },
-    setMenuData (state, menuData) {
-      state.menuData = menuData
+    setMenuData(state, menuData) {
+      state.menuData = menuData;
     },
-    setAsyncRoutes (state, asyncRoutes) {
-      state.asyncRoutes = asyncRoutes
+    setAsyncRoutes(state, asyncRoutes) {
+      state.asyncRoutes = asyncRoutes;
     },
-    setPageWidth (state, pageWidth) {
-      state.pageWidth = pageWidth
+    setPageWidth(state, pageWidth) {
+      state.pageWidth = pageWidth;
     },
-    setActivatedFirst (state, activatedFirst) {
-      state.activatedFirst = activatedFirst
+    setActivatedFirst(state, activatedFirst) {
+      state.activatedFirst = activatedFirst;
     },
-    setFixedTabs (state, fixedTabs) {
-      state.fixedTabs = fixedTabs
+    setFixedTabs(state, fixedTabs) {
+      state.fixedTabs = fixedTabs;
     },
-    setCustomTitle (state, { path, title }) {
+    setCustomTitle(state, { path, title }) {
       if (title) {
-        const obj = state.customTitles.find(item => item.path === path)
+        const obj = state.customTitles.find((item) => item.path === path);
         if (obj) {
-          obj.title = title
+          obj.title = title;
         } else {
-          state.customTitles.push({ path, title })
-        }
-        sessionStorage.setItem(process.env.VUE_APP_TBAS_TITLES_KEY, JSON.stringify(state.customTitles))
+          state.customTitles.push({ path, title });
         }
+        sessionStorage.setItem(
+          process.env.VUE_APP_TBAS_TITLES_KEY,
+          JSON.stringify(state.customTitles)
+        );
       }
-  }
-}
+    },
+  },
+};