react的ant-design-pro框架左侧菜单修改为动态路由

       在使用 React 框架联合 Ant Design Pro 举行项目开发时，动态路由的修改是一项常见且紧张的使命。动态路由可以或许根据用户的角色、权限大概其他运行时的条件来展示差别的页面内容，极大地提拔了应用的灵活性和安全性。本文将联合一个完备的示例项目，详细先容如何在 Ant Design Pro 中修改动态路由。  
在 Ant Design Pro 中使用动态路由的好处包罗：

• 灵活性：可以根据条件动态加载路由，适应差别的需求。
  
• 性能优化：联合懒加载淘汰初次加载时间，进步性能。
  
• 可维护性：路由和菜单管理清楚，易于管理和维护。
  
• 权限控制：可以根据用户角色控制访问权限，加强安全性。
  
• 用户体验：通过动态路由改善页面跳转体验，进步流畅性
  

动态路由都必要先在routes中注册页面，然后通过后端对比举行左侧菜单的表现。
下面又开看详细步调吧！
一. 路由配置（通过access来举行权限验证）。在routes.ts中注册页面路由。

2. export default [
3.   {
4.     path: '/user',
5.     layout: false,
6.     routes: [
7.       {
8.         name: 'login',
9.         path: '/user/login',
10.         component: './User/Login',
11.       },
12.     ],
13.   },
14.   // 首页
15.   {
16.     path: '/welcome',
17.     name: 'welcome',
18.     icon: 'HomeOutlined',
19.     component: './Welcome',
20.     layout: true,
21.     hideTitle: false,
22.   },
23.   // 门诊
24.   {
25.     path: '/admin',
26.     name: 'admin',
27.     icon: 'table',
28.     hideInBreadcrumb: true, // 添加这行，可以去掉父元素带子级的面包屑
29.     routes: [
30.       // 这第一个对象的作用就是当点击父级菜单时，默认重定向到父级下的第一个子菜单页面
31.       {
32.         path: '/admin',
33.         redirect: '/admin/sub-page',
34.       },
35.       // 门诊缴费记录
36.       {
37.         path: '/admin/sub-page',
38.         name: '门诊缴费记录',
39.         layout: false,
40.         component: './outpatient',
41.       },
42.       // 预约记录
43.       {
44.         path: '/admin/subscribe',
45.         name: '预约记录',
46.         // icon:'SnippetsFilled',
47.         layout: false,
48.         component: './Subscribe',
49.       },
50.     ],
51.   },
52.   // 住院
53.   {
54.     name: 'list',
55.     icon: 'ReconciliationFilled',
56.     hideInBreadcrumb: true, // 添加这行，可以去掉父元素带子级的面包屑
57.     path: '/list',
58.     routes: [
59.       // 这第一个对象的作用就是当点击父级菜单时，默认重定向到父级下的第一个子菜单页面
60.       {
61.         path: '/list',
62.         redirect: '/list/hospital',
63.         layout: false,
64.       },
65.       // 住院缴费记录
66.       {
67.         path: '/list/hospital',
68.         name: '住院缴费记录',
69.         component: './HospitalPrice',
70.         layout: false,
71.       },
72.       // 房间管理
73.       {
74.         path: '/list/room',
75.         name: '房间管理',
76.         component: './Room',
77.         layout: false,
78.       },
79.     ],
80.   },
81.   // 用户管理
82.   {
83.     name: 'user',
84.     icon: 'SnippetsFilled',
85.     hideInBreadcrumb: true, // 添加这行，可以去掉父元素带子级的面包屑
86.     path: '/user',
87.     routes: [
88.       // 这第一个对象的作用就是当点击父级菜单时，默认重定向到父级下的第一个子菜单页面
89.       {
90.         path: '/user/user',
91.         // redirect: '/user/user',
92.         name: '用户管理',
93.         component: './user',
94.         layout: false,
95.       },
96.       // 角色管理
97.       {
98.         path: '/user/role',
99.         name: '角色管理',
100.         component: './role',
101.         layout: false,
102.       },
103.       // 管理员管理
104.       {
105.         path: '/user/admin',
106.         name: '管理员管理',
107.         component: './Manage',
108.         layout: false,
109.       },
110.       // 就诊卡
111.       {
112.         path: '/user/card',
113.         name: '就诊卡',
114.         component: './Cards',
115.         layout: false,
116.       },
117.     ],
118.   },
119.   // 科室管理
120.   {
121.     name: '科室管理',
122.     path: '/TableList',
123.     icon: 'DiffFilled',
124.     access: 'adminRouteFilter',
125.     component: './TableList',
126.     layout: true,
127.   },
128.   // 医院信息
129.   {
130.     name: 'hospital',
131.     icon: 'MedicineBoxFilled',
132.     hideInBreadcrumb: true, // 添加这行，可以去掉父元素带子级的面包屑
133.     path: '/hospital',
134.     routes: [
135.       // 这第一个对象的作用就是当点击父级菜单时，默认重定向到父级下的第一个子菜单页面
136.       {
137.         path: '/hospital',
138.         redirect: '/hospital/massage',
139.       },
140.       // 医生信息
141.       {
142.         path: '/hospital/massage',
143.         name: '医院信息',
144.         // icon:'SmileFilled',
145.         component: './HospitalMassage',
146.         layout: false,
147.       },
148.       // 医生管理
149.       {
150.         path: '/hospital/doctor',
151.         name: '医生管理',
152.         component: './DoctorOffice',
153.         layout: false,
154.       },
155.       // 排班管理
156.       {
157.         name: '医生排班管理',
158.         // icon: 'table',
159.         path: '/hospital/workforce',
160.         component: './workforce',
161.         layout: false,
162.       },
163.       // 标签管理
164.       {
165.         name: '标签管理',
166.         // icon: 'table',
167.         path: '/hospital/label',
168.         access: 'adminRouteFilter',
169.         component: './label',
170.         layout: false,
171.       },
172.       // 体检管理
173.       {
174.         name: '体检管理',
175.         // icon: 'table',
176.         path: '/hospital/physical',
177.         component: './physical',
178.         layout: false,
179.       },
180.       // 药品管理
181.       {
182.         name: '药品管理',
183.         // icon: 'table',
184.         path: '/hospital/drug',
185.         component: './drug',
186.         layout: false,
187.       },
188.       // 医院动态
189.       {
190.         name: '医院动态',
191.         // icon: 'table',
192.         path: '/hospital/dynamic',
193.         component: './dynamic',
194.         layout: false,
195.       },
196.     ],
197.   },
198.   {
199.     path: '/',
200.     redirect: '/welcome',
201.   },
202.   {
203.     path: '*',
204.     layout: false,
205.     component: './404',
206.   },
207. ];

复制代码

二、动态路由实现步调
 1：配置路由访问权限(在routes.ts中给必要权限表现的路由添加：access)

2. // 科室管理
3.   {
4.     name: '科室管理',
5.     path: '/TableList',
6.     icon: 'DiffFilled',
7.     access: 'adminRouteFilter',
8.     component: './TableList',
9.     layout: true,
10.   },

复制代码

2：权限控制（在access.ts中誊写，必要根据本身的path举行修改）

2. // 动态路由控制
3. const adminRoutes = ['user', 'welcome', 'admin', 'list', 'TableList', 'hospital'];
4. const normalRoutes = ['user', 'list', 'TableList', 'hospital'];
5. const allUserRoutes = ['welcome'];
7. export default function (initialState = {}) {
8.   // 取的当前账号
9.   const userInfo = JSON.parse(localStorage.getItem('user_account'));
10.   console.log('userInfo', userInfo);
11.   const isAdmin = userInfo === 'admin';
12.   const hasRoutes = isAdmin ? adminRoutes : normalRoutes;
13.   return {
14.     adminRouteFilter: () => isAdmin, // 只有管理员可访问
15.     normalRouteFilter: (route) => hasRoutes.includes(route.name), // initialState 中包含了的路由才有权限访问
16.     allUserRouteFilter: (route) => allUserRoutes.includes(route.name),
17.   };
18. }

复制代码

分析权限控制代码：
1. 声明变量即是可以访问的菜单

2. const adminRoutes = ['user', 'welcome', 'admin', 'list', 'TableList', 'hospital'];
3. const normalRoutes = ['user', 'list', 'TableList', 'hospital'];
4. const allUserRoutes = ['welcome'];

复制代码

2. 在登录页 存用户信息，用于对比

2. const userInfo = JSON.parse(localStorage.getItem('user_account'));
3.         console.log('userInfo', userInfo);

复制代码

3. 在access.ts中取出来

2. // 取的当前账号
3.   const userInfo = JSON.parse(localStorage.getItem('user_account'));
4.   console.log('userInfo', userInfo);

复制代码

4.  对比 可以访问的菜单

1. export default function (initialState = {}) {  
2. // 取的当前账号
3.   const userInfo = JSON.parse(localStorage.getItem('user_account'));
4.   console.log('userInfo', userInfo);  const isAdmin = userInfo === 'admin';  const hasRoutes = isAdmin ? adminRoutes : normalRoutes;  return {    adminRouteFilter: () => isAdmin, // 只有管理员可访问    normalRouteFilter: (route) => hasRoutes.includes(route.name), // initialState 中包罗了的路由才有权限访问    allUserRouteFilter: (route) => allUserRoutes.includes(route.name),  };}

复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。