过滤出接口中存在的路由

src/components/Sidebar/index.tsx

@@ -7,6 +7,8 @@ import { BiCategoryAlt, BiBug } from "react-icons/bi";
 import { LiaRssSolid } from "react-icons/lia";
 import { BiLineChart } from "react-icons/bi";
 import { BiShieldQuarter } from "react-icons/bi";
+import { useUserStore } from '@/stores';
+import { getRouteListAPI } from '@/api/Role'
 
 interface SidebarProps {
   sidebarOpen: boolean;
@@ -15,6 +17,8 @@ interface SidebarProps {
 
 const Sidebar = ({ sidebarOpen, setSidebarOpen }: SidebarProps) => {
   const location = useLocation();
+  const store = useUserStore();
+
   const { pathname } = location;
 
   const trigger = useRef<any>(null);
@@ -85,7 +89,7 @@ const Sidebar = ({ sidebarOpen, setSidebarOpen }: SidebarProps) => {
   }
 
   // 路由列表
-  const routes = [
+  const routesAll = [
     {
       group: "Menu",
       list: [
@@ -201,9 +205,34 @@ const Sidebar = ({ sidebarOpen, setSidebarOpen }: SidebarProps) => {
     }
   ];
 
-  useEffect(() => {
+  const [routes, setRoutes] = useState<typeof routesAll>([])
 
-  },[])
+  // 获取路由列表
+  const getRouteList = async (id: number) => {
+    const { data } = await getRouteListAPI(id)
+    // 处理成路径
+    const pathSet = new Set(data.map((item: any) => item.path));
+
+    // 过滤出接口中存在的路由
+    const filteredRoutes = routesAll.map(group => ({
+      ...group,
+      list: group.list.map(item => {
+        if (item.subMenu) {
+          // 过滤出当前子菜单中所有存在的路由
+          const filteredSubMenu = item.subMenu.filter(subItem => pathSet.has(subItem.to));
+          return filteredSubMenu.length > 0 ? { ...item, subMenu: filteredSubMenu } : null;
+        }
+
+        return pathSet.has(item.to) ? item : null;
+      }).filter(item => item !== null)
+    })).filter(group => group.list.length > 0);
+
+    setRoutes(filteredRoutes);
+  }
+
+  useEffect(() => {
+    if (store.role.id) getRouteList(store.role.id)
+  }, [store])
 
   return (
     <aside

src/pages/Role/index.tsx

@@ -1,5 +1,5 @@
 import { useState, useEffect } from 'react';
-import { Table, Button, Form, Input, Popconfirm, message, Card, Modal, Transfer, TransferProps, Spin } from 'antd';
+import { Table, Button, Form, Input, Popconfirm, message, Card, Modal, Transfer, Spin } from 'antd';
 import { getRouteListAPI } from '@/api/Route';
 import { getRoleListAPI, addRoleDataAPI, editRoleDataAPI, delRoleDataAPI, getRouteListAPI as getRoleRouteListAPI, bindingRouteAPI } from '@/api/Role';
 import { Role } from '@/types/app/role';
@@ -16,7 +16,6 @@ const RolePage = () => {
     const [routeList, setRouteList] = useState<{ key: number, title: string }[]>([]);
     // 当前角色的路由列表
     const [targetKeys, setTargetKeys] = useState<number[]>([]);
-    const [selectedKeys, setSelectedKeys] = useState<number[]>([]);
 
     // 角色权限框
     const [isModalOpen, setIsModalOpen] = useState(false);
@@ -107,9 +106,6 @@ const RolePage = () => {
     };
 
     const onChange: any = (list: number[]) => {
-        console.log(selectedKeys);
-
-        console.log('targetKeys:', list);
         setTargetKeys(list);
     };
 
@@ -131,7 +127,7 @@ const RolePage = () => {
             <Title value="角色管理" />
 
             <div className='flex justify-between mx-auto mt-2'>
-                <Card className="w-[40%] h-73">
+                <Card className="w-[40%] h-96">
                     <Form
                         form={form}
                         layout="vertical"