devbox
笔触狂放9
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

ant design pro v5 - 03 动态菜单 动态路由（配置路由 动态登录路由 登录菜单）_ant design pro 动态菜单

作者：笔触狂放9 | 2024-04-09 10:18:17

赞

踩

ant design pro 动态菜单

1 动态菜单

        技术思路：配置路由，用户登录后根据用户信息获取后台菜单。


2 动态路由+动态菜单

        技术思路： 使用umijs的运行时修改路由 patchRoutes({ routes })  UMIJS 参考文档 ，react umi 没有守护路由的功能 直接在 app.tsx  的 layout 下的 childrenRender 添加守护路由 实现登录后的菜单路由增加。登录后的菜单由登录接口 加个menu参数获取。 默认路由+动态登录路由+动态菜单

具体操作

  • 1. 动态菜单：

文件：/src/app.tsx
找到 layout  插入 menu 

  1.     menu: {
  2.       locale: false,
  3.       params: {
  4.         userId: initialState?.currentUser?.userid,//引起菜单请求的参数
  5.       },
  6.       request: async (params, defaultMenuData) => {
  7.         const { data } = await getAuthRoutes();
  8.         return loopMenuItem(data);
  9.       },
  10.     },

完全版： 

  1. /**
  2.  * 映射菜单对应的图标
  3.  * */
  4. const loopMenuItem = (menus: MenuDataItem[]): MenuDataItem[] =>
  5.   menus.map(({ icon, routes, ...item }) => ({
  6.     ...item,
  7.     icon: icon && <Icon component={icons[icon]} />,
  8.     routes: routes && loopMenuItem(routes),
  9.   })
  10. );
  11.  
  12. // ProLayout 支持的api https://procomponents.ant.design/components/layout
  13. export const layout: RunTimeLayoutConfig = ({ initialState, setInitialState }) => {
  14.  
  15.   const onCollapse = (collapsed: boolean): void => {
  16.     setInitialState({ ...initialState, collapsed }).then();
  17.   };
  18.   const onSettings = (settings: any): void => {
  19.     setInitialState({ ...initialState, settings }).then();
  20.   };
  21.   return {
  22.     // 自定义头内容的方法  我把 自定义侧边栏收缩按钮位置 方在这里
  23.     headerContentRender: () => (
  24.       <HeaderContent collapse={initialState?.collapsed} onCollapse={onCollapse} />
  25.     ),
  26.     rightContentRender: () => <RightContent onSettings={onSettings} />,
  27.     disableContentMargin: false,
  28.     waterMarkProps: {
  29.       content: initialState?.currentUser?.name,
  30.     },
  31.     // 去掉系统自带
  32.     collapsedButtonRender: false,
  33.     // 指定配置collapsed
  34.     collapsed: initialState?.collapsed,
  35.     footerRender: () => <Footer />,
  36.     onPageChange: () => {
  37.       const { location } = history;
  38.       // 如果没有登录，重定向到 login
  39.       if (!initialState?.currentUser && location.pathname !== loginPath) {
  40.         history.push(loginPath);
  41.       }
  42.     },
  43.     menu: {
  44.       locale: false,
  45.       params: {
  46.         userId: initialState?.currentUser?.userid,//引起菜单请求的参数
  47.       },
  48.       request: async (params, defaultMenuData) => {
  49.         const { data } = await getAuthRoutes();
  50.         return loopMenuItem(data);
  51.       },
  52.     },
  53.     links: isDev
  54.       ? [
  55.         <Link key="openapi" to="/umi/plugin/openapi" target="_blank">
  56.           <LinkOutlined />
  57.           <span>OpenAPI 文档</span>
  58.         </Link>,
  59.         <Link to="/~docs" key="docs">
  60.           <BookOutlined />
  61.           <span>业务组件文档</span>
  62.         </Link>,
  63.       ]
  64.       : [],
  65.     menuHeaderRender: undefined,
  66.     // 自定义 403 页面
  67.     // unAccessible: <div>unAccessible</div>,
  68.     // 增加一个 loading 的状态
  69.     childrenRender: (children, props) => {
  70.       // if (initialState?.loading) return <PageLoading />;
  71.       const { location, route } = props;
  72.       return (
  73.         <>
  74.           {children}
  75.           {/* {!props.location?.pathname?.includes('/login') && (
  76.             <SettingDrawer
  77.               disableUrlParams
  78.               enableDarkTheme
  79.               settings={initialState?.settings}
  80.               onSettingChange={(settings) => {
  81.                 setInitialState((preInitialState) => ({
  82.                   ...preInitialState,
  83.                   settings,
  84.                 }));
  85.               }}
  86.             />
  87.           )} */}
  88.         </>
  89.       );
  90.     },
  91.     ...initialState?.settings,
  92.   };
  93. };
  • 2. 动态路由+动态菜单

技术思路：
       使用umijs的运行时修改路由 patchRoutes({ routes })  UMIJS 参考文档 ，react umi 没有守护路由的功能 直接在 app.tsx  的 layout 下的 childrenRender 添加守护路由 实现登录后的菜单路由增加。登录后的菜单由登录接口 加个menu参数获取。 默认路由+动态登录路由

文件：config/config.ts

  1. // https://umijs.org/config/
  2. import { defineConfig } from 'umi';
  3. import { join } from 'path';
  4. import defaultSettings from './defaultSettings';
  5. import proxy from './proxy';
  6. import routes from './routes';
  7.  
  8. const { REACT_APP_ENV } = process.env;
  9.  
  10. export default defineConfig({
  11.   hash: true,
  12.   antd: {},
  13.   dva: {
  14.     hmr: true,
  15.   },
  16.   layout: {
  17.     // https://umijs.org/zh-CN/plugins/plugin-layout
  18.     locale: false,
  19.     siderWidth: 208,
  20.     ...defaultSettings,
  21.   },
  22.   // https://umijs.org/zh-CN/plugins/plugin-locale
  23.   locale: {
  24.     // default zh-CN
  25.     default: 'zh-CN',
  26.     antd: true,
  27.     // default true, when it is true, will use `navigator.language` overwrite default
  28.     baseNavigator: true,
  29.   },
  30.   dynamicImport: {
  31.     loading: '@ant-design/pro-layout/es/PageLoading',
  32.   },
  33.   targets: {
  34.     ie: 11,
  35.   },
  36.   // umi routes: https://umijs.org/docs/routing
  37.   routes,
  38.   access: {},
  39.   // Theme for antd: https://ant.design/docs/react/customize-theme-cn
  40.   theme: {
  41.     // 如果不想要 configProvide 动态设置主题需要把这个设置为 default
  42.     // 只有设置为 variable， 才能使用 configProvide 动态设置主色调
  43.     // https://ant.design/docs/react/customize-theme-variable-cn
  44.     'root-entry-name': 'variable',
  45.   },
  46.   // esbuild is father build tools
  47.   // https://umijs.org/plugins/plugin-esbuild
  48.   esbuild: {},
  49.   title: false,
  50.   ignoreMomentLocale: true,
  51.   proxy: proxy[REACT_APP_ENV || 'dev'],
  52.   manifest: {
  53.     basePath: '/',
  54.   },
  55.   // Fast Refresh 热更新
  56.   fastRefresh: {},
  57.   openAPI: [
  58.     {
  59.       requestLibPath: "import { request } from 'umi'",
  60.       // 或者使用在线的版本
  61.       // schemaPath: "https://gw.alipayobjects.com/os/antfincdn/M%24jrzTTYJN/oneapi.json"
  62.       schemaPath: join(__dirname, 'oneapi.json'),
  63.       mock: false,
  64.     },
  65.     {
  66.       requestLibPath: "import { request } from 'umi'",
  67.       schemaPath: 'https://gw.alipayobjects.com/os/antfincdn/CA1dOm%2631B/openapi.json',
  68.       projectName: 'swagger',
  69.     },
  70.   ],
  71.   nodeModulesTransform: {
  72.     type: 'none',
  73.   },
  74.   mfsu: {},
  75.   webpack5: {},
  76.   exportStatic: {},
  77. });

文件：config/routes.ts

  1. import type { MenuDataItem } from '@ant-design/pro-layout';
  2.  
  3. export default [
  4.   {
  5.     path: '/user',
  6.     layout: false,
  7.     routes: [
  8.       {
  9.         path: '/user/login',
  10.         layout: false,
  11.         name: 'login',
  12.         component: '@/pages/modules/user/Login',
  13.       },
  14.       {
  15.         path: '/user/openlogin',
  16.         layout: false,
  17.         name: 'login',
  18.         component: '@/pages/modules/user/openlogin',
  19.       },
  20.       {
  21.         path: '/user',
  22.         redirect: '@/pages/modules/user/login',
  23.       },
  24.       {
  25.         name: 'register-result',
  26.         icon: 'smile',
  27.         path: '/user/register-result',
  28.         component: '@/pages/modules/user/register-result',
  29.       },
  30.       {
  31.         name: 'register',
  32.         icon: 'smile',
  33.         path: '/user/register',
  34.         component: '@/pages/modules/user/register',
  35.       }
  36.     ]
  37.   },
  38.   {
  39.     path: '/',
  40.     component: './layouts/commonLayout',
  41.     flatMenu: true,
  42.     routes: [
  43.       // {
  44.       //   path: '/welcome',
  45.       //   name: '工作台',
  46.       //   component: '@/pages/modules/welcome',
  47.       // }
  48.     ]
  49.   },
  50.   {
  51.     component: '404',
  52.   },
  53. ];

 app.tsx

  1. let extraRoutes;
  2.  
  3. export function patchRoutes({ routes }) {
  4.   if (extraRoutes) {
  5.     // extraRoutes.forEach((element: any) => {
  6.     routes.forEach((route: any) => {
  7.       if (route.path == "/") {
  8.         route.routes = mergeRoutes(extraRoutes);
  9.       }
  10.     });
  11.     // });
  12.  
  13.   }
  14.   console.log("--------------------路由-------------------------", routes);
  15. }
  16.  
  17. // export function render(oldRender) {
  18. //   getMenu().then((res: any) => {
  19. //     if (res.code == 200) {
  20. //       extraRoutes = res.result;
  21. //       oldRender();
  22. //     } else {
  23. //       history.push('/login');
  24. //       oldRender()
  25. //     }
  26. //   });
  27. // }
  28.  
  29. // /**
  30. //  * 映射菜单对应的图标
  31. //  * */
  32. // const loopMenuItem = (menus: MenuDataItem[]): MenuDataItem[] =>
  33. //   menus.map(({ icon, routes, ...item }) => ({
  34. //     ...item,
  35. //     icon: icon && <Icon component={icons[icon]} />,
  36. //     routes: routes && loopMenuItem(routes),
  37. //   })
  38. //   );
  39.  
  40. /**
  41.  * @see  https://umijs.org/zh-CN/plugins/plugin-initial-state
  42.  * */
  43. export async function getInitialState(): Promise<{
  44.   settings?: Partial<LayoutSettings>;
  45.   currentUser?: API.CurrentUser;
  46.   loading?: boolean;
  47.   collapsed?: boolean;
  48.   // menuData?: MenuDataItem[] | undefined;
  49.   fetchUserInfo?: () => Promise<API.CurrentUser | undefined>;
  50. }> {
  51.   const fetchUserInfo = async () => {
  52.     try {
  53.       const msg = await queryCurrentUser();
  54.       return msg.data;
  55.     } catch (error) {
  56.       // 跳转到指定路由
  57.       history.push(loginPath);
  58.     }
  59.     return undefined;
  60.   };
  61.   // 如果不是登录页面，执行
  62.   if (history.location.pathname !== loginPath) {
  63.     const currentUser = await fetchUserInfo();
  64.     return {
  65.       fetchUserInfo,
  66.       currentUser,
  67.       settings: defaultSettings,
  68.     };
  69.   }
  70.   return {
  71.     fetchUserInfo,
  72.     settings: defaultSettings,
  73.   };
  74. }
  75.  
  76. // ProLayout 支持的api https://procomponents.ant.design/components/layout
  77. export const layout: RunTimeLayoutConfig = ({ initialState, setInitialState }) => {
  78.  
  79.   const onCollapse = (collapsed: boolean): void => {
  80.     setInitialState({ ...initialState, collapsed }).then();
  81.   };
  82.   const onSettings = (settings: any): void => {
  83.     setInitialState({ ...initialState, settings }).then();
  84.   };
  85.   return {
  86.     // 自定义头内容的方法  我把 自定义侧边栏收缩按钮位置 方在这里
  87.     headerContentRender: () => (
  88.       <HeaderContent collapse={initialState?.collapsed} onCollapse={onCollapse} />
  89.     ),
  90.     rightContentRender: () => <RightContent onSettings={onSettings} />,
  91.     disableContentMargin: false,
  92.     waterMarkProps: {
  93.       content: initialState?.currentUser?.name,
  94.     },
  95.     // 去掉系统自带
  96.     collapsedButtonRender: false,
  97.     // 指定配置collapsed
  98.     collapsed: initialState?.collapsed,
  99.     footerRender: () => <Footer />,
  100.     onPageChange: () => {
  101.       const { location } = history;
  102.       // 如果没有登录，重定向到 login
  103.       if (!initialState?.currentUser && location.pathname !== loginPath) {
  104.         history.push(loginPath);
  105.       }
  106.     },
  107.     // menuDataRender: () => { return fixMenuItemIcon(initialState.menuData) },
  108.     menu: {
  109.       locale: false,
  110.       params: {
  111.         userId: initialState?.currentUser?.userid,//引起菜单请求的参数
  112.       },
  113.       request: async (params, defaultMenuData) => {
  114.         // const msg = await getMenu();
  115.         return fixMenuItemIcon(initialState?.currentUser?.menu);
  116.       },
  117.     },
  118.     links: isDev
  119.       ? [
  120.         <Link key="openapi" to="/umi/plugin/openapi" target="_blank">
  121.           <LinkOutlined />
  122.           <span>OpenAPI 文档</span>
  123.         </Link>,
  124.         <Link to="/~docs" key="docs">
  125.           <BookOutlined />
  126.           <span>业务组件文档</span>
  127.         </Link>,
  128.       ]
  129.       : [],
  130.     menuHeaderRender: undefined,
  131.     // 自定义 403 页面
  132.     // unAccessible: <div>unAccessible</div>,
  133.     // 增加一个 loading 的状态
  134.     childrenRender: (children, props) => {
  135.       // if (initialState?.loading) return <PageLoading />;
  136.       const { location, route } = props;
  137.  
  138.       if (history.location.pathname !== loginPath && initialState?.currentUser?.menu) {
  139.         // 路由守卫
  140.         // const msg = await getMenu();
  141.         extraRoutes = initialState?.currentUser?.menu;
  142.         console.log("--------------------路由01-------------------------", extraRoutes);
  143.         patchRoutes(route);
  144.       }
  145.  
  146.       return (
  147.         <>
  148.           {children}
  149.           {/* {!props.location?.pathname?.includes('/login') && (
  150.             <SettingDrawer
  151.               disableUrlParams
  152.               enableDarkTheme
  153.               settings={initialState?.settings}
  154.               onSettingChange={(settings) => {
  155.                 setInitialState((preInitialState) => ({
  156.                   ...preInitialState,
  157.                   settings,
  158.                 }));
  159.               }}
  160.             />
  161.           )} */}
  162.         </>
  163.       );
  164.     },
  165.     ...initialState?.settings,
  166.   };
  167. };

 src/utils/fixMenuItemIcon.tsx

  1. import React from 'react';
  2. import type { MenuDataItem } from '@ant-design/pro-layout';
  3. import * as allIcons from '@ant-design/icons';
  4.  
  5. const fixMenuItemIcon = (menus: MenuDataItem[], iconType = 'Outlined'): MenuDataItem[] => {
  6.    menus.forEach((item) => {
  7.       const { icon, routes } = item
  8.       if (typeof icon === 'string' && icon != null) {
  9.          const fixIconName = icon.slice(0, 1).toLocaleUpperCase() + icon.slice(1) + iconType
  10.          // eslint-disable-next-line no-param-reassign
  11.          item.icon = React.createElement(allIcons[fixIconName] || allIcons[icon])
  12.       }
  13.       // eslint-disable-next-line no-param-reassign,@typescript-eslint/no-unused-expressions
  14.       routes && routes.length > 0 ? item.routes = fixMenuItemIcon(routes) : null
  15.    });
  16.    return menus
  17. };
  18.  
  19. export default fixMenuItemIcon;

 src/utils/roles.tsx
 

  1. // import { getUserPerm } from '@/services/menu';
  2. // import router from 'umi/router';
  3. import React from 'react';
  4. import Icon from '@ant-design/icons';
  5. import * as icons from '@ant-design/icons';
  6. import { dynamic, RunTimeLayoutConfig } from 'umi';
  7. import { SmileOutlined, HeartOutlined } from '@ant-design/icons'
  8.  
  9.  
  10. export function mergeRoutes(routes) {
  11.     if (!Array.isArray(routes)) return [];
  12.     return routes.map(route => {
  13.         let module = route.component;
  14.         if (route.component) {
  15.             route.component = (component => {
  16.                 if (typeof component === 'object') {
  17.                     return component;
  18.                 }
  19.                 // 封装一个异步组件
  20.                 return dynamic({
  21.                     loader: () => import(`../pages/${module}/index.tsx`)
  22.                 });
  23.             })(route.component);
  24.         }
  25.  
  26.         if (route.routes) {
  27.             route.routes = mergeRoutes(route.routes);
  28.         }
  29.         return route;
  30.     });
  31. }

注意： 登陆子模块要 符合 /src/pages/  模块名称 /index.tsx 的组合

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/笔触狂放9/article/detail/392051
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号