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": "[email protected]",
"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”, 的
所以要根据这个是去匹配，因为它们是跟程序相关的，一般不会变化。
当然你的后端可以任意来实现，只要返回出的数据匹配就对了。
我的网站