ant design pro access.ts 是如何控制多角色的权限的

在这里插入图片描述

  • ant design pro 如何去保存颜色
  • ant design pro v6 如何做好角色管理
  • ant design 的 tree 如何作为角色中的权限选择之一
  • ant design 的 tree 如何作为角色中的权限选择之二

看上面的图片，在前端中如何控制这些权限，比如控制按钮的显示，还有菜单的显示。

首先我定义好了权限：

const checkPermission = (currentUser: API.CurrentUser, action: string, path: string) => {return (currentUser &&currentUser.roles.some((role: any) =>role.permissions &&!!role.permissions.find((item: any) => item.action === action && item.path === path),));
};export default function access(initialState: { currentUser?: API.CurrentUser } | undefined) {const { currentUser } = initialState ?? {};return {canSuperAdmin: currentUser && currentUser.isAdmin,canUpdateRole:currentUser && (currentUser.isAdmin || checkPermission(currentUser, '/roles/:id', 'PUT')),canCreateRole:currentUser && (currentUser.isAdmin || checkPermission(currentUser, '/roles', 'POST')),canDeleteRole:currentUser && (currentUser.isAdmin || checkPermission(currentUser, '/roles', 'DELETE')),canGetRole:currentUser && (currentUser.isAdmin || checkPermission(currentUser, '/roles', 'GET')),canUpdateUser:currentUser && (currentUser.isAdmin || checkPermission(currentUser, '/users/:id', 'PUT')),canDeleteUser:currentUser && (currentUser.isAdmin || checkPermission(currentUser, '/users', 'Delete')),canCreateUser:currentUser && (currentUser.isAdmin || checkPermission(currentUser, '/users', 'POST')),canGetUser:currentUser && (currentUser.isAdmin || checkPermission(currentUser, '/users', 'GET')),canUpdateMenu:currentUser && (currentUser.isAdmin || checkPermission(currentUser, '/menus/:id', 'PUT')),canDeleteMenu:currentUser && (currentUser.isAdmin || checkPermission(currentUser, '/menus', 'DELETE')),canCreateMenu:currentUser && (currentUser.isAdmin || checkPermission(currentUser, '/menus', 'POST')),canGetMenu:currentUser && (currentUser.isAdmin || checkPermission(currentUser, '/menus', 'GET')),canUpdatePermission:currentUser &&(currentUser.isAdmin || checkPermission(currentUser, '/permissions/:id', 'PUT')),canDeletePermission:currentUser &&(currentUser.isAdmin || checkPermission(currentUser, '/permissions', 'DELETE')),canCreatePermission:currentUser && (currentUser.isAdmin || checkPermission(currentUser, '/permissions', 'POST')),canGetPermission:currentUser && (currentUser.isAdmin || checkPermission(currentUser, '/permissions', 'GET')),canUpdateDataPermission:currentUser &&(currentUser.isAdmin || checkPermission(currentUser, '/data-permissions/:id', 'PUT')),canDeleteDataPermission:currentUser &&(currentUser.isAdmin || checkPermission(currentUser, '/data-permissions', 'DELETE')),canCreateDataPermission:currentUser &&(currentUser.isAdmin || checkPermission(currentUser, '/data-permissions', 'POST')),canGetDataPermission:currentUser &&(currentUser.isAdmin || checkPermission(currentUser, '/data-permissions', 'GET')),canCreateMaterialCategory:currentUser &&(currentUser.isAdmin || checkPermission(currentUser, '/material-categories', 'POST')),canDeleteMaterialCategory:currentUser &&(currentUser.isAdmin || checkPermission(currentUser, '/material-categories', 'DELETE')),canUpdateMaterialCategory:currentUser &&(currentUser.isAdmin || checkPermission(currentUser, '/material-categories/:id', 'PUT')),canGetMaterialCategory:currentUser &&(currentUser.isAdmin || checkPermission(currentUser, '/material-categories', 'GET')),canCreatePermissionGroup:currentUser &&(currentUser.isAdmin || checkPermission(currentUser, '/permission-groups', 'POST')),canDeletePermissionGroup:currentUser &&(currentUser.isAdmin || checkPermission(currentUser, '/permission-groups', 'DELETE')),canUpdatePermissionGroup:currentUser &&(currentUser.isAdmin || checkPermission(currentUser, '/permission-groups/:id', 'PUT')),canGetPermissionGroup:currentUser &&(currentUser.isAdmin || checkPermission(currentUser, '/permission-groups', 'GET')),};
}

先来讲讲如何应用它。

再讲一下，它的原理和搞法

在这里插入图片描述
假如你没用动态菜单，只要在 access 加上定义的权限就行。

在这里插入图片描述
这种是按钮的控制。

access 是这样引入的。这些在它的官网都有吧。

在这里插入图片描述
在这里插入图片描述
主要还是定义那块代码：

需要跟后端配合

const checkPermission = (currentUser: API.CurrentUser, action: string, path: string) => {return (currentUser &&currentUser.roles.some((role: any) =>role.permissions &&!!role.permissions.find((item: any) => item.action === action && item.path === path),));
};

首先你后端过来的 currentUser 要放 roles

roles 里面要放 permissions

可以参考下我的后端返回的内容：

{"success": true,"data": {"_id": "66aaedb6e2b1f912103e6b3e","email": "superadmin@2024fc.xyz","role": "SUPER_ADMIN","live": true,"createdAt": "2024-08-01T02:06:46.725Z","updatedAt": "2024-08-12T07:03:04.841Z","__v": 0,"name": "superadmin","priceList": [],"roles": [{"_id": "66b6d74eb9ad87dfa985f6b1","name": "管理员","permissions": [{"_id": "66adee8cd22d6d5b1ce00780","name": "更新权限","path": "/permissions/:id","action": "PUT","permissionGroup": "66b1b00bb5d937a0aef34034","createdAt": "2024-08-03T08:47:08.777Z","updatedAt": "2024-08-10T02:38:15.837Z","__v": 0},{"_id": "66b1a12b0e10340bd8bbeba0","name": "删除权限","path": "/permissions","action": "DELETE","createdAt": "2024-08-06T04:06:03.752Z","updatedAt": "2024-08-10T02:31:07.287Z","__v": 0,"permissionGroup": "66b1b00bb5d937a0aef34034"},{"_id": "66b1c55141364c27c464f858","name": "查看权限","path": "/permissions","action": "GET","permissionGroup": "66b1b00bb5d937a0aef34034","createdAt": "2024-08-06T06:40:17.991Z","updatedAt": "2024-08-10T08:03:27.245Z","__v": 0},{"_id": "66b6cf51aa92a3526285b14d","name": "添加权限","path": "/permissions","action": "POST","createdAt": "2024-08-10T02:24:17.940Z","updatedAt": "2024-08-10T02:30:22.189Z","__v": 0,"permissionGroup": "66b1b00bb5d937a0aef34034"},{"_id": "66b6d339b9ad87dfa985f3dd","name": "添加用户","path": "/users","action": "POST","permissionGroup": "66b6d2c9b9ad87dfa985f34f","createdAt": "2024-08-10T02:40:57.583Z","updatedAt": "2024-08-10T02:41:30.112Z","__v": 0},{"_id": "66b6d352b9ad87dfa985f3f0","name": "查看用户","path": "/users","action": "GET","permissionGroup": "66b6d2c9b9ad87dfa985f34f","createdAt": "2024-08-10T02:41:22.895Z","updatedAt": "2024-08-10T08:03:22.477Z","__v": 0},{"_id": "66b6d368b9ad87dfa985f416","name": "删除用户","path": "/users","action": "DELETE","permissionGroup": "66b6d2c9b9ad87dfa985f34f","createdAt": "2024-08-10T02:41:44.912Z","updatedAt": "2024-08-10T02:41:44.912Z","__v": 0},{"_id": "66b6d37bb9ad87dfa985f429","name": "更新用户","path": "/users/:id","action": "PUT","permissionGroup": "66b6d2c9b9ad87dfa985f34f","createdAt": "2024-08-10T02:42:03.242Z","updatedAt": "2024-08-10T02:45:40.000Z","__v": 0},{"_id": "66b6d440b9ad87dfa985f488","name": "添加菜单","path": "/menus","action": "POST","permissionGroup": "66b6d2ddb9ad87dfa985f362","createdAt": "2024-08-10T02:45:20.021Z","updatedAt": "2024-08-10T02:45:20.021Z","__v": 0},{"_id": "66b6d46cb9ad87dfa985f4c1","name": "删除菜单","path": "/menus","action": "DELETE","permissionGroup": "66b6d2ddb9ad87dfa985f362","createdAt": "2024-08-10T02:46:04.896Z","updatedAt": "2024-08-10T02:46:04.896Z","__v": 0},{"_id": "66b6d47db9ad87dfa985f4d4","name": "更新菜单","path": "/menus/:id","action": "PUT","permissionGroup": "66b6d2ddb9ad87dfa985f362","createdAt": "2024-08-10T02:46:21.612Z","updatedAt": "2024-08-10T02:46:52.140Z","__v": 0},{"_id": "66b6d48bb9ad87dfa985f4e7","name": "查看菜单","path": "/menus","action": "GET","permissionGroup": "66b6d2ddb9ad87dfa985f362","createdAt": "2024-08-10T02:46:35.896Z","updatedAt": "2024-08-10T08:03:13.698Z","__v": 0},{"_id": "66b6d39eb9ad87dfa985f43c","name": "添加角色","path": "/roles","action": "POST","permissionGroup": "66b6d2e9b9ad87dfa985f377","createdAt": "2024-08-10T02:42:38.531Z","updatedAt": "2024-08-10T02:42:38.531Z","__v": 0},{"_id": "66b6d3dfb9ad87dfa985f44f","name": "删除角色","path": "/roles","action": "DELETE","permissionGroup": "66b6d2e9b9ad87dfa985f377","createdAt": "2024-08-10T02:43:43.882Z","updatedAt": "2024-08-10T02:43:43.882Z","__v": 0},{"_id": "66b6d3fab9ad87dfa985f462","name": "更新角色","path": "/roles/:id","action": "PUT","permissionGroup": "66b6d2e9b9ad87dfa985f377","createdAt": "2024-08-10T02:44:10.845Z","updatedAt": "2024-08-10T02:45:31.647Z","__v": 0},{"_id": "66b6d40db9ad87dfa985f475","name": "查看角色","path": "/roles","action": "GET","permissionGroup": "66b6d2e9b9ad87dfa985f377","createdAt": "2024-08-10T02:44:29.797Z","updatedAt": "2024-08-10T08:03:18.669Z","__v": 0},{"_id": "66b6d544b9ad87dfa985f559","name": "添加数据权限","path": "/data-permissions","action": "POST","permissionGroup": "66b6d2fdb9ad87dfa985f38e","createdAt": "2024-08-10T02:49:40.379Z","updatedAt": "2024-08-10T02:49:40.379Z","__v": 0},{"_id": "66b6d559b9ad87dfa985f56c","name": "删除数据权限","path": "/data-permissions","action": "DELETE","permissionGroup": "66b6d2fdb9ad87dfa985f38e","createdAt": "2024-08-10T02:50:01.137Z","updatedAt": "2024-08-10T02:50:01.137Z","__v": 0},{"_id": "66b6d578b9ad87dfa985f57f","name": "更新数据权限","path": "/data-permissions/:id","action": "PUT","permissionGroup": "66b6d2fdb9ad87dfa985f38e","createdAt": "2024-08-10T02:50:32.533Z","updatedAt": "2024-08-10T02:50:32.533Z","__v": 0},{"_id": "66b6d586b9ad87dfa985f592","name": "查看数据权限","path": "/data-permissions","action": "GET","permissionGroup": "66b6d2fdb9ad87dfa985f38e","createdAt": "2024-08-10T02:50:46.780Z","updatedAt": "2024-08-10T08:03:04.925Z","__v": 0},{"_id": "66b9ad528554e602536acc84","name": "授权管理菜单","path": "/auth","action": "GET","permissionGroup": "66b9ad348554e602536acc67","createdAt": "2024-08-12T06:36:02.754Z","updatedAt": "2024-08-12T06:36:02.754Z","__v": 0},{"_id": "66b6d4bdb9ad87dfa985f50d","name": "添加权限组","path": "/permission-groups","action": "POST","permissionGroup": "66b6d314b9ad87dfa985f3a7","createdAt": "2024-08-10T02:47:25.139Z","updatedAt": "2024-08-10T02:47:25.139Z","__v": 0},{"_id": "66b6d500b9ad87dfa985f520","name": "删除权限组","path": "/permission-groups","action": "DELETE","permissionGroup": "66b6d314b9ad87dfa985f3a7","createdAt": "2024-08-10T02:48:32.481Z","updatedAt": "2024-08-10T02:48:32.481Z","__v": 0},{"_id": "66b6d519b9ad87dfa985f533","name": "更新权限组","path": "/permission-groups/:id","action": "PUT","permissionGroup": "66b6d314b9ad87dfa985f3a7","createdAt": "2024-08-10T02:48:57.720Z","updatedAt": "2024-08-10T02:48:57.720Z","__v": 0},{"_id": "66b6d52cb9ad87dfa985f546","name": "查看权限组","path": "/permission-groups","action": "GET","permissionGroup": "66b6d314b9ad87dfa985f3a7","createdAt": "2024-08-10T02:49:16.624Z","updatedAt": "2024-08-10T08:03:09.517Z","__v": 0}],"dataPermissions": [],"createdAt": "2024-08-10T02:58:22.168Z","updatedAt": "2024-08-12T06:57:27.434Z","__v": 0}],"isAdmin": true,"avatar": "https://gw.alipayobjects.com/zos/rmsportal/BiazfanxmamNRoxxVxka.png"}
}

permission 里面是有 “path”: “/permissions/:id”,
“action”: “PUT”, 的

所以要根据这个是去匹配，因为它们是跟程序相关的，一般不会变化。

当然你的后端可以任意来实现，只要返回出的数据匹配就对了。

我的网站

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/web/50861.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

【Linux操作系统】进程控制

【Linux操作系统】进程控制

目录 一、进程创建1.1 认识fork1.2 写时拷贝 二、进程终止2.1 进程退出2.2 函数退出2.3 exit 三、进程等待四、程序替换 一、进程创建 1.1 认识fork fork函数是系统调用接口，用来创建子进程的 根据进程的pid，可以看出父进程fork后分为父进程和子进程…
阅读更多...
找到你的任务管理伙伴：待办事项软件终极指南

找到你的任务管理伙伴：待办事项软件终极指南

国内外主流的10款待办事项管理软件对比：PingCode、WorktileTodoist、TickTick、Teambition、 Microsoft To Do、. Asana、Tower、番茄ToDo、飞书。 在面对日益复杂的工作和个人任务时，找到一款能够有效帮助你管理日常待办事项的软件，变得越来…
阅读更多...
[RCTF2015]EasySQL1

[RCTF2015]EasySQL1

打开题目 点进去看看 注册个admin账户，登陆进去 一个个点开看，没发现flag 我们也可以由此得出结论，页面存在二次注入的漏洞，并可以大胆猜测修改密码的源代码 resoponse为invalid string的关键字是被过滤的关键字，Le…
阅读更多...
blender内置树木的UV

blender内置树木的UV

之前听说用这个内置插件可以创建树木 我这边的默认配置出来的树木长这样，不得不想一下，他的uv怎么展，看起来好多树 我尝试看了一眼默认的UV 结果如下 好像每个树枝都已经是平铺的样子了，那么如果需要改的话，就根据…
阅读更多...
大模型预训练与微调之间的关系

大模型预训练与微调之间的关系

1. 引言 大语言模型的兴起与训练范式 在过去的十年中，随着计算能力和数据规模的显著提升，大语言模型（Large Language Models, LLMs）在自然语言处理（Natural Language Processing, NLP）领域掀起了一场革命…
阅读更多...
基于Python的火车票售票系统/基于django的火车购票系统

基于Python的火车票售票系统/基于django的火车购票系统

摘 要 随着信息技术和网络技术的飞速发展，人类已进入全新信息化时代，传统管理技术已无法高效，便捷地管理信息。为了迎合时代需求，优化管理效率，各种各样的管理系统应运而生，各行各业相继进入信息管理时代&…
阅读更多...
stripe Element 如何使用

stripe Element 如何使用

这里要准备好几个东西： 一个支付成功过后的回调 还有一个下单的接口 一旦进入这个下单界面，就要去调下单的接口的，用 post, 这个 接口你自己写，可以写在后端中，也可以放到 nextjs 的 api 中。 首先说的是这个下单…
阅读更多...
算法【Java】—— 双指针算法

算法【Java】—— 双指针算法

双指针算法 常见的双指针有对撞指针，快慢指针以及前后指针（这个前后指针是指两个指针都是从从一个方向出发，去往另一个方法，也可以认为是小学学习过的两车并行，我也会叫做同向指针），在前后指针…
阅读更多...
vscode中使用官方推荐的编程字体Cascadia Code字体

vscode中使用官方推荐的编程字体Cascadia Code字体

字体样式 > 和 有特殊效果 很多字体都支持使用连字，Cascadia Code 、Jetbrains Mono 、Fira Code 等 安装Cascadia Code 下载完成后解压安装 选中右键安装，static文件里也一样安装 VS Code 中配置设置字体和连字设置 Cascadia Code, Consolas, Couri…
阅读更多...
计算机的错误计算（六十七）

计算机的错误计算（六十七）

摘要 计算机的错误计算（五十六）与（六十六）分别探讨了大数与 附近数的正切函数值的错误计算。本节讨论第三种类型数值： 附近数 的正切函数的计算精度问题。 例1. 已知 计算 先用 Go语言计算： packag…
阅读更多...
STL介绍以及string类

STL介绍以及string类

什么是STL 是C标准库的重要组成部分，不仅是一个可复用的组件库，而且是一个包罗数据结构与算法的软件框架。 STL的六大组件 为什么要学习string类 C语言中的字符串 C语言中，字符串是以\0结尾的一些字符的集合，为了操作方便&am…
阅读更多...
模具监视器的技术参数有哪些

模具监视器的技术参数有哪些

模具监视器的技术参数涵盖了多个方面，这些参数对于确保模具监视器的性能、稳定性和检测精度至关重要。以下是一些主要的技术参数： 一、显示器参数 屏幕尺寸：常见的模具监视器显示器尺寸为12.5英寸至13.5英寸，具体尺寸可能因不同…
阅读更多...
HTTP？HTTPS？HTTP2.0

HTTP？HTTPS？HTTP2.0

Http HTTP（HyperText Transfer Protocol，超文本传输协议）是一种用于分布式、协作式、超媒体信息系统的应用层协议。它基于TCP/IP通信协议来传递数据，如HTML文件、图片文件等。以下是HTTP的详细解析： 一、HTTP的基本…
阅读更多...
手撕C++入门基础

手撕C++入门基础

1.C介绍 C课程包括：C语法、STL、高阶数据结构 C参考文档：Reference - C Reference C 参考手册 - cppreference.com cppreference.com C兼容之前学习的C语言 2.C的第一个程序 打印hello world #define _CRT_SECURE_NO_WARNINGS 1 // test.cpp // …
阅读更多...
Unity Dots学习 （一）

Unity Dots学习 （一）

先学习怎么使用，再研究底层代码。Dots大家都有所耳闻。一直没时间研究，最近研究一下 看上图可知，哪怕是CPU的第三级缓存也比内存要快2-5倍。 资料： 《DOTS之路》第零节——前导课(1)——DOTS的5W1H问题_哔哩哔哩_bilibili 《DOT…
阅读更多...
景联文科技：图像标注的类型有哪些？

景联文科技：图像标注的类型有哪些？

图像标注是计算机视觉领域中一个非常重要的步骤，它是创建训练数据集的关键组成部分，主要用于帮助机器学习算法理解图像内容。 以下是图像标注的一些主要类型： 1. 边界框标注： • 这是最常见的标注方式之一，通常用于…
阅读更多...
第四范式发布AI+5G视频营销产品 助力精准获客与高效转化

第四范式发布AI+5G视频营销产品 助力精准获客与高效转化

产品上新 Product Release 今天，第四范式AI5G视频电话互动营销产品全新发布。 相较于以往销效率低、互动差、转化差的传统电话外呼和短信营销方式，视频电话互动营销基于AI、5G等技术，可让用户接听电话时观看个性化视频广告并实时互动&#xf…
阅读更多...
Unity的UI设计

Unity的UI设计

目录 创建和布局 布局与交互 性能优化 最佳实践 学习资源 Unity UI Toolkit与uGUI和IMGUI之间的具体区别和适用场景是什么？ Unity UI Toolkit uGUI IMGUI 如何在Unity中实现响应式UI设计以适应不同设备尺寸？ Unity UI性能优化的最新技术和方法…
阅读更多...
机器学习：逻辑回归算法实现鸢尾花预测和银行数据处理

机器学习：逻辑回归算法实现鸢尾花预测和银行数据处理

1、鸢尾花预测 1、特征选择 2、对特征处理 trainpd.read_excel("鸢尾花训练数据.xlsx") testpd.read_excel("鸢尾花测试数据.xlsx") x_traintrain[["萼片长(cm)","萼片宽(cm)","花瓣长(cm)","花瓣宽(cm)"]] y_tr…
阅读更多...
Vue 生命周期详解含demo、面试常问问题案例

Vue 生命周期详解含demo、面试常问问题案例

Vue 生命周期详解、面试常问问题案例 含 demo 文章目录 Vue 生命周期详解、面试常问问题案例 含 demo一、Vue 生命周期是什么二、Vue 中如何使用生命周期钩子1. **beforeCreate**2. **created**3. **beforeMount**4. **mounted**5. **beforeUpdate**6. **updated**7. **beforeD…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023