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

news2024/11/15 13:30:44

在这里插入图片描述

  • 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.coloradmin.cn/o/2053416.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

Stable diffusion模型分几种?一文详解,入门必看!

在Stable Diffusion中,模型并不只有一种,不同插件有不同的模型,分别作用于不同的功能。今天就带大家一起来学习一下~ 01 大模型 也就是stable diffusion模型,在默认界面中,它位于web页面的左上角&#x…

[数据结构] RBTree 模拟实现RBTree

标题:[数据结构] RBTree && 模拟实现RBTree 水墨不写bug 目录 一、红黑树的概念 二、map和set的封装 三、红黑树的实现 1、红黑树节点的定义 2、红黑树的结构 3、红黑树的插入 1.名称 2.插入节点的颜色 红黑树的insert 实现 情况一:不…

微信自动化管理了解下

微信作为一款广泛使用的社交软件,已经成为人们日常生活中不可或缺的通讯工具。不仅个人用户频繁使用,许多企业也依赖微信进行业务沟通和客户服务。 然而,对于企业用户来说,管理多个微信账户往往带来诸多繁琐和不便之处。这些问题…

Django+anaconda

一、搭建django虚拟环境 打开anaconda prompt 输入:conda create -n mydjango_env 判断(y/n):y 查看虚拟环境 conda env list *号表示当前使用的环境 激活创建的虚拟环境 activate mydjango_env 二、安装Django 在新环境激活的状态下安装…

Nature|通过范德华层压实现三维单片集成系统 (半导体器件/集成电路)

2024年5月22日,湖南大学刘渊(Yuan Liu)教授课题组,在《Nature》上发布了一篇题为“Monolithic three-dimensional tier-by-tier integration via van der Waals lamination”的论文。第一作者为湖南大学物理与微电子科学学院陆冬林(Donglin Lu)博士。论文内容如下: 一、 …

Stable Diffusion 的采样器

一图 不推荐使用的采样器 PLMS LMS LMS Karras DPM fast DPM2 DPM2a DPM2 Karras DPM2 a Karras 可以在设置里把采样器去掉

同态加密和SEAL库的介绍(十)CKKS 参数心得 2

写在前面: 本篇继续上篇的测试,首先针对密文深度乘法情况,虽然密文乘法本就是应该尽量避免的(时间和内存成本过高),更不用说深度乘法了,但是为了测试的完整性,还是做一下方便大家比对…

CVE-2021-21315漏洞复现

一、基本信息 攻击机:kali IP:192.168.100.60 靶机:CentOS7 IP:192.168.100.40 二、攻击过程 下载node.js环境 wget https://nodejs.org/dist/v12.18.4/node-v12.18.4-linux-x64.tar.xz tar -xvf node-v12.18.4-linux-x64.tar.xz mv node-v12.18.4-…

89.WEB渗透测试-信息收集-Google语法(3)

免责声明:内容仅供学习参考,请合法利用知识,禁止进行违法犯罪活动! 内容参考于: 易锦网校会员专享课 上一个内容:88.WEB渗透测试-信息收集-Google语法(2) 常用的 Google 语法的作用…

【大数据平台】可扩展性设计

欢迎来到我的博客,很高兴能够在这里和您见面!欢迎订阅相关专栏: 工💗重💗hao💗:野老杂谈 ⭐️ 全网最全IT互联网公司面试宝典:收集整理全网各大IT互联网公司技术、项目、HR面试真题.…

线程间同步的概念

一、线程间同步的概念 rtthread通过线程间同步建立线程间的执行顺序,多个线程访问的同一个内存叫做临界区。rtthread提供的同步的工具 1、信号量 2、互斥量 3、事件集 二、信号量 2.1 信号量概念 rtthread将信号量抽象成rt_semaphore. 2.2 信号量api 2.3 信号量示例…

本地Docker部署开源Web相册图库Piwigo与在线远程访问实战方案

💝💝💝欢迎来到我的博客,很高兴能够在这里和您见面!希望您在这里可以感受到一份轻松愉快的氛围,不仅可以获得有趣的内容和知识,也可以畅所欲言、分享您的想法和见解。 推荐:kwan 的首页,持续学…

【leetcode详解】T3137(思路详解 代码优化感悟)

思路详解 要解决这个问题,我们的大致思路是这样:找到长度为k的字符串 (记为stringA) ,统计重复次数最多的那一个,则最终对应的k周期字符串就是 [stringA * n] 的形式( n word.length() / k) 要实现多对象的计数&…

【数据结构】关于Java对象比较,以及优先级队列的大小堆创建你了解多少???

前言: 🌟🌟Hello家人们,这期讲解对象的比较,以及优先级队列堆,希望你能帮到屏幕前的你。 🌈上期博客在这里:http://t.csdnimg.cn/MSex7 🌈感兴趣的小伙伴看一看小编主页&…

分享一个基于SpringBoot的物品代购系统的设计与实现(源码、调试、LW、开题、PPT)

💕💕作者:计算机源码社 💕💕个人简介:本人 八年开发经验,擅长Java、Python、PHP、.NET、Node.js、Android、微信小程序、爬虫、大数据、机器学习等,大家有这一块的问题可以一起交流&…

从零开始学嵌入式技术之数字电路

一:数字电路基础 数字电路是现代科技和工程领域中不可或缺的基础。从计算机系统到通信设备,从家庭电子产品到工业自动化,数字电路无处不在,影响着我们的生活和工作。本章节旨在向读者介绍数字电路的基本概念、原理和应用&#xff…

迭代器失效

一、什么是迭代器失效 迭代器的主要作用就是让算法能够不用关心底层数据结构,其底层实际就是一个指针,或者是对指针进行了封装,比如:vector的迭代器就是原生态指针T* 。因此迭代器失效,实际就是迭代器底层对应指针所指…

Kubernetes之Probe探针

目录 存活、就绪和启动探针 存活探针(Liveness Probe) 就绪探针(Readiness Probe) 启动探针(Startup Probe) 检测方式: exec: HTTP GET: TCP Socket: …

linux DHCP和VSFTP原理与配置

目录 一、DHCP工作原理 1.1 了解DHCP服务 1.1.1 DHCP基本描述 1.1.2 使用DHCP的好处 1.1.3 DHCP的分配方式 1.2 DHCP的租约过程 1.3 使用DHCP动态配置主机地址 1.4 安装DHCP服务器 二、DHCP服务器的配置 2.1 实验环境准备 2.2 实验实战示列 三、DHCP客户端的使用 …

【数据结构】汇总八、排序算法

排序Sort 【注意】本章是 排序 的知识点汇总,全文1万多字,含有大量代码和图片,建议点赞收藏(doge.png)!! 【注意】在这一章,记录就是数据的意思。 排序可视化网站: D…