lcw

src/layout/components/SideBar/SideBarMenu.vue

@@ -1,8 +1,19 @@
 <template>
-  <el-menu class="el-menu-vertical-demo" :collapse="!$store.getters.sidebarOpened" :default-active="activeMenu"
-    :unique-opened="true" background-color="rgba(0, 0, 0, 0)" :text-color="$store.getters.cssVar.menuText"
-    :active-text-color="$store.getters.cssVar.menuActiveText" router>
-    <SideBarItem v-for="item in routes" :key="item.path" :route="item"></SideBarItem>
+  <el-menu
+    class="el-menu-vertical-demo"
+    :collapse="!$store.getters.sidebarOpened"
+    :default-active="activeMenu"
+    :unique-opened="true"
+    background-color="rgba(0, 0, 0, 0)"
+    :text-color="$store.getters.cssVar.menuText"
+    :active-text-color="$store.getters.cssVar.menuActiveText"
+    router
+  >
+    <SideBarItem
+      v-for="item in routes"
+      :key="item.path"
+      :route="item"
+    ></SideBarItem>
   </el-menu>
 </template>
 
@@ -11,27 +22,62 @@ import { computed } from "vue";
 import { useRouter, useRoute } from "vue-router";
 import { useStore } from "vuex";
 import { filterRoutes, generateMenus } from "@/utils/route";
+import { getItem } from "@/utils/storage";
 import SideBarItem from "./SideBarItem.vue";
 const store = useStore();
 const router = useRouter();
+const EXCLUDE_NAMES = [
+  "warningLists",
+  "behaviorWarnings",
+  "identityWarnings",
+  "combinedWarnings",
+  "DeploymentAreas",
+  "mpvPeos",
+  "myControls"
+];
+const filterRoutesByMenusPermission = (routes, menusSet) => {
+  return routes.reduce((result, route) => {
+    const children = Array.isArray(route.children)
+      ? filterRoutesByMenusPermission(route.children, menusSet)
+      : [];
+    const routeName = route.name ? `${route.name}` : "";
+    const selfMatched = routeName && menusSet.has(routeName);
+    if (selfMatched || children.length > 0) {
+      result.push({ ...route, children });
+    }
+    return result;
+  }, []);
+};
 const routes = computed(() => {
   const fRoutes = filterRoutes(router.getRoutes());
+  const data = fRoutes.filter((item) => !EXCLUDE_NAMES.includes(item.name));
+  const menusPermission = getItem("menusPermission");
+  console.log(JSON.parse(localStorage.getItem("menusPermission")));
+  console.log(
+    router.getRoutes().map((r) => ({ name: r.name, path: r.path })),
+    "xxx"
+  );
+  // menusPermission 里存的 name
+  router
+    .getRoutes()
+    .filter((r) => r.path === "/")
+    .map((r) => ({
+      name: r.name,
+      path: r.path,
+      children: r.children?.map((c) => ({ name: c.name, path: c.path }))
+    }));
+  console.log(JSON.parse(localStorage.getItem("menusPermission")));
+  const menusSet = new Set(
+    Array.isArray(menusPermission)
+      ? menusPermission.map((item) => `${item}`)
+      : []
+  );
+  console.log(menusSet);
 
-  const data = fRoutes.filter(item => {
-    if (item.name != "warningLists"
-      && item.name != "behaviorWarnings"
-      && item.name != "identityWarnings"
-      && item.name != "combinedWarnings"
-      && item.name != "DeploymentAreas"
-      && item.name != "mpvPeos"
-      && item.name != "myControls") {
-      return item;
-    }
-  }
-  )
-  console.log(data);
-
-  return generateMenus(data);
+  const permissionFiltered = menusSet.size
+    ? filterRoutesByMenusPermission(data, menusSet)
+    : data;
+  return generateMenus(permissionFiltered);
 });
 if (!store.getters.token) {
   router.push("/login");