当前位置：首页 > news >正文

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

news 来源：原创 2024/9/12 22:19:11

在这里插入图片描述

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