javascript - 在 React Redux 中使用嵌套 Angular 色和权限

Question

我的问题更多的是，对于用户可能拥有一组嵌套 Angular 色和权限的应用程序，如何获取 React 应用程序的 Angular 色列表。您是否在用户登录时预先发送用户的整个权限列表/树，然后将其存储起来以便之后可以迭代它？

例如，假设用户位于 Angular 色 1 中，并且 Angular 色 1 具有一组权限，但他们也位于其他几个 Angular 色中，或者 Angular 色中甚至可能存在子 Angular 色。您基本上是预先获取该列表并将其存储在 redux 存储中吗？

所以 2 个问题:

1) 您何时以及如何获取 Angular 色和权限列表(他们何时登录？您在调用什么，权限端点还是即将到来当他们登录时返回 session 响应有效负载？或其他方式？)

2) 您如何存储和迭代该列表？

您需要在 UI 端使用这样的列表执行一些操作，例如隐藏/显示删除按钮，根据某些 Angular 色和权限隐藏/显示用户的任何内容，所以我想知道人们是如何做到这一点的.

您点击的后端 API 还会检查用户是否可以执行任何 http 动词，但这不是我在这里指的，我指的是遍历和检查 UI 端的 Angular 色以处理用户行为/UI 组件行为。其中一些问题可以通过查明用户是否能够成功对后端 REST API 进行 API 调用来处理，但如果您有一组复杂的 Angular 色，则情况远不止于此，您仍然需要该列表例如，当用户登陆组件时，以某种方式预先执行一些预先行为。

Answer 1

我会构建已经从服务器端可能的多个 Angular 色合并的权限，例如结构如下:

{
  "posts": ["add", "view"],
  "comments": ["add", "view", "delete", "change"]
}

何时发送几乎取决于您的应用程序的设计。作为对登录的响应是完全有道理的。关键点是数据在组件需要之前就可用。然后我会将这些权限存储在 redux 存储中并连接相关组件，例如像:

const Comments = ({comments, hasDeletePermission, hasChangePermissions}) => {
  <ul>
    {comments.map(comment => (
      <li>
        <p>{comment}</p>      
        {hasChangePermission && <button>change</button>}
        {hasDeletePermission && <button>delete</button>}
      </li>
    ))}
  </ul>
};

const mapStateToProps = (state, ownProps) => ({
  hasDeletePermission: state.user.permissions['comments'].includes('delete'),
  hasChangePermissions: state.user.permissions['comments'].includes('change'),
});

export default connect(mapStateToProps)(Comments);

您还可以为匿名用户设置默认权限值。