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

【问题标题】：How to pass a plain object to the permissions of CASL (React)如何将普通对象传递给 CASL (React) 的权限
【发布时间】：2019-05-17 23:15:19
【问题描述】：

如何将条件传递给<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>

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

【问题讨论】：

不使用 JSX 语法直接传入即可。如果你想在组件中渲染它，请使用React.createElement
@Andrew 你能举个例子吗？
我收回了。刚刚查看了 CASL 的文档。我认为这是一个通用的 React 问题。看起来您正在尝试做一些 API 无法处理的事情
据我所知，它期望像对象一样。 CASL 的职责是识别一个对象并将对象的值与定义的条件进行比较？我错了吗？我认为 lib 不应该关心它是类还是对象的实例，它应该以相同的方式处理。

【解决方案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 的链接，因此您可以快速使用它）。 Todo 应用使用了您需要在应用中实现的类似用例。

最后，我创建了一个单独的增强功能https://github.com/stalniy/casl/issues/192，因此其他人将收到一条错误消息，其中包含有关错误用法和文档链接的说明。

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

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

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

更新2：默认Ability禁止做任何事情，所以你的AbilityBuilder不能只包含禁止规则。您至少需要一个允许某事做的规则。

【讨论】：