ant design pro实现动态路由以及权限的控制

2024-05-29 07:33:41

dynamic-menu-router

ant design pro动态路由权限，目前基于ant design pro1.4.4版本，只用于左侧菜单权限的设置和按钮权限设置，关于最新版本权限的更新，敬请留意（演示请看demo列表）。

对common中menu.js和router.js的拆分和组合(具体细节请参考代码)

1.将menu.js中的menuData提取出去，暂时放在mock数据中（menuData.js），因为这些数据要用真实的接口来获取。

2.在router.js中getRouterConfig的底部增加以下代码。目的是将routerConfig对象通过reducer传入到models/global中备用。

// eslint-disable-next-line
app._store.dispatch({
type: 'global/saveRouterConfig',
payload: routerConfig,
});

3.将router.js中getFlatMenuData方法提取到menu.js中(getFlatMenuData:将数据处理为以路径为键的数据)。

4. 将router.js中routerConfig和menuData进行合并处理的函数提取到menu.js中，变为getRouterData(getRouterData:将routerConfig和menuData进行合并)。

5.在models/global.js中的effects中加入fetchMenus（用于获取最终处理好的路由），在reducers中加入saveRouterConfig（用于将router.js中getRouterConfig放到reduce中）。

6. 在components/utils中加入AppMenu高阶组件，用于获取最终的路由列表。

权限校验

重写utils/authority，这个主要用于权限的校验。

按钮权限

menuData中增加actions数组，用于存放权限字段，demo-noe页面用于测试按钮权限

报错修改

第一种：将node_modules/history/esm/history.js的esm换位es6即可

./node_modules/history/esm/history.js
Module not found: Can't resolve '@babel/runtime/helpers/esm/extends'

温馨提示

亲们，如果帮助到您了，请给个星。 -_-

Github

github地址：https://github.com/hf1120/dynamic-menu-router

　　

转载于:https://www.cnblogs.com/hf-jb/p/8861611.html

ant design pro实现动态路由以及权限的控制相关推荐

ant design pro vue 动态路由流程详解
ant design pro vue 动态路由流程详解前言流程图流程1 src/permission.js 流程2 src/store/modules/user.js 流程3 src/perm ...
Ant Design Pro of Vue方案一权限路由配置（一步步完成，包括所有后端数据库代码，萌新向）
Ant Design Pro of Vue方案一权限路由配置(一步步完成,包括所有后端数据库代码,萌新向) 参考了许多csdn的文章,感谢大家为社区做的贡献,我也来汇总一波,谢谢
Ant Design Pro 4 动态菜单icon丢失解决办法
最近在开发人事管理系统,其中菜单是需要动态渲染,针对不同角色授权不同的菜单权限. 路由由后端返回,格式如下: [ { "path": "/", "na ...
Ant Design Pro 跳转路由传参数，接收参数
umi/link 通过声明的方式做路由跳转. 例子: import Link from 'umi/link';export default () => {<div>/* 普通使用 * ...
Ant Design Pro 企业级后台实战（73 个视频）
Ant Design Pro 企业级后台实战(73 个视频) Ant Design Pro 企业级后台实战 #1 介绍(声音已调到毫无杂音_) Ant Design Pro 企业级后台实战 #2 学习 ...
Ant design pro v4-服务器菜单和路由权限控制
要解决的问题:ant design pro默认情况下,菜单和路由都用配置的方式,在前端的config/config.ts中配置.但是大多数后台系统都需要由后端服务器控制权限. 类似的需求一般包括两点: ...
Ant Design Pro v5 获取动态菜单与基于角色权限管理视频教程（33 个视频）
Ant Design Pro v5 获取动态菜单与基于角色权限管理视频教程(33 个视频) 很多人问如何获取动态菜单的,所以在 antd prov 5 来讲一下角色管理的.从最基础的用户管理,角色管理 ...
react ant design pro typescript springboot activiti权限、工作流框架
是什么? 使用springboot,activiti,mybatis,react,ant design pro,typescript 开发的后台管理系统(包含权限管理.工作流等功能),真正前后端分离的 ...
同志们,免费版的Ant Design Pro Vue3 来啦
Vue3也出了一段时间了,于是照着ant pro vue搭个免费的vue3版希望大家喜欢基于 Vite2 Vue3 Ant-Design-of-Vue2 TS实现的 Ant Design Pro ...

最新文章

热门文章