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

server/2024/9/22 21:16:02/

在这里插入图片描述

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

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

首先我定义好了权限：

javascript">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 是这样引入的。这些在它的官网都有吧。

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

需要跟后端配合

javascript">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

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

javascript">{"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.ppmy.cn/server/104134.html

相关文章

【C++ 面试 - 面向对象】每日 3 题（六）

【C++ 面试 - 面向对象】每日 3 题（六）

✍个人博客：Pandaconda-CSDN博客 📣专栏地址：http://t.csdnimg.cn/fYaBd 📚专栏简介：在这个专栏中，我将会分享 C 面试中常见的面试题给大家~ ❤️如果有收获的话，欢迎点赞👍收藏&…
阅读更多...
【docker综合篇】关于我用docker搭建了6个应用服务的事

【docker综合篇】关于我用docker搭建了6个应用服务的事

最近一直在捣鼓docker，利用测试服务器，本着犯错就重来(重装系统)的大无畏精神，不断尝试，总结经验，然后在网上搜寻一些关于docker有关的服务镜像，并搭建起来。看着一个个服务在我的服务器跑起来，…
阅读更多...
Docker 命令补全

Docker 命令补全

在Docker Swarm环境中部署完后，如果你发现没有命令补全功能，可以按照以下步骤启用Docker命令的自动补全。 1. 安装 Bash Completion 首先，确保你的系统上安装了 bash-completion。你可以通过以下命令来安装它： sudo apt-get up…
阅读更多...
【杂谈】-8个常用的Python图像操作库

【杂谈】-8个常用的Python图像操作库

8个常用的Python图像操作库 文章目录 8个常用的Python图像操作库1、OpenCV2、Pillow（PIL）3、Scikit Image4、Numpy5、SciPy6、Mahotas7、SimpleITK8、Matplotlib 在当今世界，数据在每个行业垂直领域中都发挥着至关重要的作用。图像可以是提取…
阅读更多...
选择排序（直接选择排序和堆排序）

选择排序（直接选择排序和堆排序）

一、直接选择排序 1.基本思想 每一次从待排序的数据元素中选出最小（或最大）的一个元素，存放在序列的起始位置，直到全部待排序的数据元素排完。 2.动图展示 3.思路讲解 ①在元素集合array[i]—array[n-1]中选择关键码最大&…
阅读更多...
Jakarta Servlet 到 SpringMVC

Jakarta Servlet 到 SpringMVC

Jakarta EE（曾被称为Java EE）是Java平台企业版（Java Platform Enterprise Edition）的下一代版本，它在Oracle将Java EE的开发和维护交给Eclipse Foundation后得以重生，并更名为Jakarta EE。Jakarta EE保留了…
阅读更多...
算法的学习笔记—树的子结构（牛客JZ26）

算法的学习笔记—树的子结构（牛客JZ26）

😀前言 在算法面试中，二叉树相关的问题经常出现，其中一个经典的问题是判断一棵二叉树B是否是另一棵二叉树A的子结构。本文将深入探讨这个问题，并通过代码示例展示如何解决这一问题。 🏠个人主页：尘觉主页 文…
阅读更多...
解决图片导入Excel后变成横向问题

解决图片导入Excel后变成横向问题

最近有同事遇到图片打开的时候是竖向的，导入Excel后就变成横向了 我在网上搜了一下，没找到直接的答案 我猜大概是用了某些软件做处理（例如压缩分辨率）但是没处理干净 后来经过多次尝试，发现只要用windows自带的画图软件…
阅读更多...
最新文章

Copyright @ 2022~2023