如何将普通对象传递给 CASL (React) 的权限

Question

如何将条件传递给与能力对象中的条件匹配的<Can />组件。

向我的应用公开权限的 AbilityBuilder：

AbilityBuilder.define((can, cannot) => {
  cannot('delete', 'user', { role: 2 }) // <- 2
});

应该呈现段落的组件。

<Can I="delete" a="user" of={{ role: 1 }}>
    <p>Should be visible</p> 
</Can>

如何传递对象而不是 class 的实例？我还没有找到任何相关信息:(

Answer 1

这是CASL使用的常见误区。 ability.can 和 React 的 <Can> 都不支持这种行为。

您需要做的是了解主题名称是什么以及 CASL 如何根据传入的 ability.can 对象检测主题名称。这在文档中有解释：https://stalniy.github.io/casl/abilities/2017/07/21/check-abilities.html#instance-checks

如果文档中的信息不够，请阅读 https://github.com/stalniy/casl/issues/59。

另请查看示例应用程序 https://github.com/stalniy/casl-react-example（codesanbox 有一个 link，因此您可以快速使用它）。 Todo 应用使用了您需要在应用中实现的类似用例。

最后，我创建了一个单独的 ehancement https://github.com/stalniy/casl/issues/192，因此其他人将收到一条错误消息，其中包含有关错误用法的解释和 link 文档。

基本上你需要定义自己的subjectName检测函数，并像这样传递给用户：

<Can I="delete" this={{ role: 1, __typename: 'user' }}>
    <p>Should be visible</p> 
</Can>

更新：typename 应该是对象实例的一部分，以防止冲突（例如，当对象看起来相同或相似但类型不同时）。保持对象类型及其实例之间一致性的最简单方法是使用类。但也有其他方法，例如 GraphQL 有 __typename 字段告诉客户端从服务器接收到的对象类型

更新 2：默认情况下 Ability 禁止执行所有操作，因此您的 AbilityBuilder 不能仅包含禁止的规则。您至少需要一个允许执行某些操作的规则。

How to pass a plain object to the permissions of CASL (React)