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

于 2024-08-19 15:13:31 发布
阅读量244 收藏 2
点赞数 2
分类专栏： ant design pro 文章分享 文章标签： react.js javascript 个人开发
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_39637597/article/details/141325953
版权

在这里插入图片描述

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

首先我定义好了权限：

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”, 的

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

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

我的网站

程序员随风
关注
  • 2
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
antd pro 生成的框架的权限控制分析
weixin_43416349的博客
10-30 308
背景 ：npm i @ant-design/pro-cli -g pro create myapp 生成框架 ， 当我们不登录，直接进入其他页面，它就会退出去登录页面，那么它是如何做的呢？总结： 当在routes对某个路由配置 access字段时，就要对两个位置进行配置（config只要配置一次就不算了） 分别是 access.ts文件，app的getInitState钩子函数。用Umi官网的生成简单框架就够了，请求，路由，layout自己配，根据项目的复杂度再渐进式的去增加功能。
体验ANT DESIGN PRO V5--菜单角色权限和服务端请求菜单(解决icon显示文字)
热门推荐
weixin_41957432的博客
11-20 1万+
根据接口返回的角色渲染菜单 大致流程如下图所示 在建立的ANT DESIGN PRO V5项目中，主要靠以下两个文件完成左侧菜单根据角色权限渲染 默认的ant design pro v5项目给我们两个权限角色 admin和user，查看账户登录接口(/api/login/account)mock的数据： // mock/user.ts // 登录接口返回 mock/user.ts下接口/api/login/account if (password === 'ant.design' &&
Ant Design Pro中access权限控制--进入项目后默认展示有权限的第一个菜单页面（项目没有公共页面）
weixin_62192841的博客
10-25 1859
Ant Design Pro脚手架中，access进行权限控制，但是整个项目并没有一个公共（不需要鉴权）的页面，功能要求进入项目后默认展示有权限的第一个菜单页面......的解决方法。
【 React Ant Design Pro 路由配置】
m0_64415782的博客
05-15 1919
React Ant Design Pro 路由配置
基于antd pro权限管理的页面权限和页面内权限控制实现
weixin_54122176的博客
05-18 3081
一、页面权限 参考：Ant Design Pro文档 —权限管理 1、关于页面权限控制的实现 antd pro 项目中的 src/access.ts，该文件中 export default 一个函数用于定义用户拥有的权限,例如： //routes.js 文件部分代码 export default [ //...此处省略n行代码 { path: '/home', component: './home', name: '首页', access: 'home', i
antDesignPro6：供应链系统项目-实战问题&解决汇总
qq_38969618的博客
04-23 1891
AntDesign组件库的相关使用
ant design pro v5
yuzheh521的博客
07-24 1775
就是删除这个文件 ./src/components/index.md，我建的项目是 simple，删了之后直接可以运行。目前已经试过删除node_modules文件夹，并重新安装依赖包，依旧报错。### 问题出现的环境背景及自己尝试过哪些方法。Ant Design Pro版本：5.2.0。
前端初学者的Ant Design Pro V6总结（下）
SpringWaterLikeMe
12-04 2482
Antd Pro 相关配置、Pro Component 组件配置
Ant design Pro 跨域问题解决方案（SpringBoot版本）
林仔520的博客
05-02 1770
错误描述： Access to fetch at ‘http://localhost:9000/api/login/account’ from origin ‘http://localhost:8000’ has been blocked by CORS policy: Response to preflight request doesn’t pass access control check: No ‘Access-Control-Allow-Origin’ header is present on
Ant Design以及Ant Design Pro入门.zip
10-10
这个名为"Ant Design以及Ant Design Pro入门.zip"的压缩包文件包含了学习这两个框架的基础资源，包括代码示例、相关资料和讲义，旨在帮助初学者快速掌握ReactJS、Ant Design和Ant Design Pro的基本用法。 ReactJS是...
day02-Ant Design以及Ant Design Pro入门.zip
01-29
Ant Design和Ant Design Pro是两个广泛应用于前端开发的UI框架，尤其在构建企业级Web应用时，它们提供了高效且美观的组件库。本教程“day02-Ant Design以及Ant Design Pro入门”将引导初学者深入理解这两个强大的...
AntDesign Pro 4.0.sketch
01-08
产品经理原型图
AntDesignPro开发手册.doc
12-13
AntDesignPro 开发手册 AntDesignPro 是一个前端设计解决方案，由蚂蚁金服体验技术部出品/维护。核心技术组成包括 ES2015+ JavaScript 语言的新标准、React 用于构建用户界面的 JavaScript 库、dva 是基于(redux...
react中使用nextjs框架，前端调后端接口跨域解决方式
晚风的博客
08-14 340
react中使用nextjs框架，前端调后端接口跨域解决方式
Immutable-持久化数据结构：助力 React 性能提升
李刚的学习专栏
08-14 917
如果组件的属性和状态是不可变的数据结构，可以显著简化Diff算法的复杂性： 引用比较：每次更新都会产生一个完全新的对象，而不是修改原有对象，React可以简单地通过比较对象的引用，来确定数据是否发生了变化。如果两个对象的引用不同，那么肯定不同，这比深度比较数据结构的每个部分要快得多； 结构共享：Immutable数据结构在进行更新时，只创建变动部分的新实例，而保留未变部分的引用。这意味着在Diff算法中，React能够迅速识别出哪些部分是完全相同的，从而跳过这些部分的比较，直接关注那些确实发生了变化的部分。
react用useEffect防止数据内存泄漏
Z_Wonderful的博客
08-15 240
2、确保初始化函数initData不会在组件卸载后继续执行。
React+Vis.js（01）：实现基本的网络图
最新发布
WwLK123的博客
08-18 58
使用React+Vis.js实现最原始的关系图。
ant design pro中.async.js
07-09
在 ant design pro 中，`.async.js` 文件是按需加载（lazy loading）的 JavaScript 文件。这种文件命名约定是为了标识这些文件是通过动态导入（dynamic import）的方式异步加载的。 按需加载是一种优化技术，它使得页面在初始加载时只加载必要的资源，而不是一次性加载所有的资源。这样可以加快页面的初始加载速度，并且只在需要时才加载额外的资源。 在 ant design pro 中，`.async.js` 文件通常用于按需加载页面或路由组件。例如，在路由配置中，你可以这样使用 `.async.js` 文件： ```javascript import { lazy } from 'umi'; const ExamplePage = lazy(() => import('./ExamplePage.async.js')); export default () => { return <ExamplePage />; } ``` 这将会在需要时异步加载 `ExamplePage.async.js` 文件。 需要注意的是，`.async.js` 文件只是一种命名约定，并没有特殊的语法或功能。它只是用于标识该文件通过按需加载的方式引入。实际上，你可以使用任何你喜欢的命名来表示按需加载的文件，只需在代码中正确引用即可。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

程序员随风

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值