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后分为父进程和子进程…
阅读更多...
C++ //练习 17.12 使用前一题中的数据结构，编写一个函数，它接受一个问题编号和一个表示真/假解答的值，函数根据这两个参数更新测验的解答。

C++ //练习 17.12 使用前一题中的数据结构，编写一个函数，它接受一个问题编号和一个表示真/假解答的值，函数根据这两个参数更新测验的解答。

C Primer（第5版） 练习 17.12 练习 17.12 使用前一题中的数据结构，编写一个函数，它接受一个问题编号和一个表示真/假解答的值，函数根据这两个参数更新测验的解答。 环境：Linux Ubuntu（云服务器…
阅读更多...
【pdf文件生成】如何将盖章的文件生成PDF文件

【pdf文件生成】如何将盖章的文件生成PDF文件

一、提出问题 在我们的工作中，有时候上级让下级将盖章的文件生成PDF文件通过内部平台发送到上级邮箱，那如何解决呢？是去找一个扫描仪，还是用手机拍图转。用Python基实就能实现。 二、分析问题 现在网上好多的软件都是收费的&am…
阅读更多...
Spring 中AbstractApplicationContext

Spring 中AbstractApplicationContext

AbstractApplicationContext 是 Spring Framework 中的一个抽象类，位于 org.springframework.context 包中。它带有一系列的实现，主要用于为 Spring 的应用上下文提供基本的功能。所有的 Spring 应用上下文实现（如 ClassPathXmlApplicationCo…
阅读更多...
vue3列表页搜索条件封装

vue3列表页搜索条件封装

搜索框组件 封装常用搜索框组件，类型有： input（默认值)selectselectV2 (value/label键值对数组)datePickeryear 集成新增、修改、删除、导入、导出按钮，支持slot自定义其他按钮封装搜索、重置按钮封装按钮权限封装导入弹框 本例仅…
阅读更多...
找到你的任务管理伙伴：待办事项软件终极指南

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

国内外主流的10款待办事项管理软件对比：PingCode、WorktileTodoist、TickTick、Teambition、 Microsoft To Do、. Asana、Tower、番茄ToDo、飞书。 在面对日益复杂的工作和个人任务时，找到一款能够有效帮助你管理日常待办事项的软件，变得越来…
阅读更多...
Baumer工业相机堡盟工业相机如何通过BGAPISDK初始化时过滤其它非Baumer相机（C#）

Baumer工业相机堡盟工业相机如何通过BGAPISDK初始化时过滤其它非Baumer相机（C#）

Baumer工业相机堡盟工业相机如何通过BGAPISDK初始化时过滤其它非Baumer相机（C#） Baumer工业相机Baumer工业相机通过SDK初始化时过滤其它非Baumer相机的技术背景通过SDK过滤其它非Baumer相机的代码分析1、引用合适的类文件2、初始化时过滤其它非Baumer相机…
阅读更多...
[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】—— 双指针算法

双指针算法 常见的双指针有对撞指针，快慢指针以及前后指针（这个前后指针是指两个指针都是从从一个方向出发，去往另一个方法，也可以认为是小学学习过的两车并行，我也会叫做同向指针），在前后指针…
阅读更多...
【CMake】学习笔记2

【CMake】学习笔记2

文章目录 06.指定头文件路径07.通过CMake制作库文件制作动态库或静态库制作静态库制作动态库指定动态库/静态库输出的路径 08.在程序中链接静态库09.在程序中链接动态库11. 在cmake中打印日志信息12.字符串操作使用set拼接使用list拼接list字符串移除list其他命令 06.指定头文件…
阅读更多...
vscode中使用官方推荐的编程字体Cascadia Code字体

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

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

使用Java连接redis的方式

除了使用 Spring Data Redis&#xff0c;Java 连接 Redis 还可以通过以下几种方式&#xff1a; 1. Jedis Jedis 是一个流行的 Java Redis 客户端库&#xff0c;提供了简单的 API 来访问 Redis。 依赖&#xff1a; <dependency><groupId>redis.clients</grou…
阅读更多...
Spring Boot集成Jythonb并且支持三方的python依赖包

Spring Boot集成Jythonb并且支持三方的python依赖包

上篇文章讲了 如何在java中执行python代码&#xff0c;这篇文章讲一下如何让jython支持三方依赖包 1.什么是Jython&#xff1f; Jython是Python编程语言的JVM实现。 它旨在在Java平台上运行。 Jython程序可以导入和使用任何Java类。 就像Java一样&#xff0c;Jython程序编译为…
阅读更多...
SX_UNIX套接字通信_15

SX_UNIX套接字通信_15

UNIX套接字通信的优势&#xff1a; UNIX套接字通信常用于一个项目中的进程之间通信&#xff0c;UNIX提供了与网络套接字相似的特性&#xff0c;但是避免了网络延迟&#xff0c;提高了性能&#xff0c;但是它只能在同一台机器上使用&#xff0c;无法跨越网络的进程间通信 实例&…
阅读更多...
计算机的错误计算（六十七）

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

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

STL介绍以及string类

什么是STL 是C标准库的重要组成部分&#xff0c;不仅是一个可复用的组件库&#xff0c;而且是一个包罗数据结构与算法的软件框架。 STL的六大组件 为什么要学习string类 C语言中的字符串 C语言中&#xff0c;字符串是以\0结尾的一些字符的集合&#xff0c;为了操作方便&am…
阅读更多...
最新文章

Copyright @ 2022~2023