casl中的项目级别权限

Question

在我的例子中，权限不是基于角色的，而且也不会有一个可以在登录后放置的中心权限对象。权限发生在项目级别。权限发生在项目级别，我的意思是如果我有一个todos对象，它有大约4个项目，那么每个项目可能有不同的权限，如下所示

const todos = {
  data: [
    {
      id: 1,
      title: "Todo 1",
      sub: "Let's start!",
      permissions: [
        {
          action: "read",
          subject: "todo"
        },
        {
          action: "delete",
          subject: "todo"
        }
      ],
      __typename: "Todo"
    },
    { id: 2, title: "Todo 2", sub: "Let's start 2!", __typename: "Todo" },
    {
      id: 3,
      title: "Todo 3",
      sub: "Let's start 3!",
      permissions: [
        {
          action: "read",
          subject: "todo"
        }
      ],
      __typename: "Todo"
    },
    { id: 4, title: "Todo 4", sub: "Let's start 4!", __typename: "Todo" }
  ]
};

在这种情况下，如何使用casl处理权限？

这就是我所做的

ability.js

import { Ability } from "@casl/ability";

export default new Ability([
  {
    action: "read",
    subject: "todo"
  },
  {
    action: "delete",
    subject: "todo"
  }
]);

can.js

import { createContext } from "react";
import { createContextualCan } from "@casl/react";

export const AbilityContext = createContext();
export const Can = createContextualCan(AbilityContext.Consumer);

index.js

import React from "react";
import { Ability } from "@casl/ability";
import { AbilityContext, Can } from "./can";

const todos = {
  data: [
    {
      id: 1,
      title: "Todo 1",
      sub: "Let's start!",
      permissions: [
        {
          action: "read",
          subject: "todo"
        },
        {
          action: "delete",
          subject: "todo"
        }
      ],
      __typename: "Todo"
    },
    { id: 2, title: "Todo 2", sub: "Let's start 2!", __typename: "Todo" },
    {
      id: 3,
      title: "Todo 3",
      sub: "Let's start 3!",
      permissions: [
        {
          action: "read",
          subject: "todo"
        }
      ],
      __typename: "Todo"
    },
    { id: 4, title: "Todo 4", sub: "Let's start 4!", __typename: "Todo" }
  ]
};

const Permission = () => {
  const ability = React.useContext(AbilityContext);
  return (
    <>
      <h1>Permission Based System</h1>
      {todos.data.map((todo) => (
        <div key={todo.id}>
          <Can I="read" a="todo">
            <div style={{ display: "flex", alignItems: "center" }}>
              <div style={{ display: "flex", flexDirection: "column" }}>
                <h1 style={{ margin: 0 }}>{todo.title}</h1>
                <h3>{todo.sub}</h3>
              </div>
              <Can I="delete" a="todo">
                <span>Delete</span>
              </Can>
            </div>
          </Can>
        </div>
      ))}
    </>
  );
};

export default Permission;

我还创建了一个沙箱

https://codesandbox.io/s/mystifying-leaf-i968u?file=/src/permission/index.js:0-1472

Answer 1

例如，当您将权限嵌入到实体中时，您不需要CASL。你可以使用它，但它不会带来任何好处。为什么？

1. 您无缘无故地为数组中的每个待办事项复制subject Todo作为响应。您知道您请求了Todo，甚至GraphQL的__typename属性也会告诉您这一点。
2. 它需要为每个主题类型创建一个Ability实例(在本例中为Todo)，遍历所有待办事项，根据id生成一个条件对象(这样我们以后就可以检查Todo了

所有这些都是无用的，带来了额外的复杂性，而且根本没有好处。

对于您的案例，更好的结构应该是：

permissions: {
  canRead: true,
  canDelete: true
}

因此，您可以轻松地检查UI - todo.permissions.canRead上的权限