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

ant design pro access.ts 是如何控制多角色的权限的_第1张图片

  • 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')),
  };
}

先来讲讲如何应用它。

再讲一下,它的原理和搞法

ant design pro access.ts 是如何控制多角色的权限的_第2张图片
假如你没用动态菜单,只要在 access 加上定义的权限就行。

ant design pro access.ts 是如何控制多角色的权限的_第3张图片
这种是按钮的控制。

access 是这样引入的。这些在它的官网都有吧。

ant design pro access.ts 是如何控制多角色的权限的_第4张图片
ant design pro access.ts 是如何控制多角色的权限的_第5张图片
主要还是定义那块代码:

需要跟后端配合

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

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

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

我的网站

你可能感兴趣的:(ant,design,pro,文章分享,react.js,javascript,个人开发)