authentication - 设置 redux 操作的权限

Question

我正在创建一个 Web redux-react 应用程序，它将具有许多不同的权限级别。许多用户可能正在与一项数据进行交互，但有些用户的操作可能受到限制。

对我来说，设置数据交互权限(保存在应用程序服务器后面)的明显方法是将某些权限与不同的 redux 操作相关联。然后，当用户保存其状态时，客户端应用程序将捆绑用户的操作历史记录并将其发送回服务器。然后，这些操作可以应用于服务器中的数据，并且可以针对用户 jwt 逐个操作地检查权限。

这意味着我们的许多 reducer 代码可以在服务器上同构使用。

我找不到任何关于此的资源/讨论。在 redux 应用程序中处理复杂权限的正常方法是什么？纯粹在端点进行身份验证似乎很麻烦，这需要重写大量已经在客户端 reducer 中编写的新代码。有什么理由不继续创建一个 reducer 来检查每个操作的身份验证？

积分:

• 我们必须假设发送到服务器的操作经过身份验证，但发送者没有权限调度这些操作
• 如果权限已被检查并且在操作中，那么reducer 可以检查权限并且是纯粹的

Answer 1

我认为检查权限不是 Action 创建者的责任，但使用 reducer 和选择器绝对是正确的方法。这是一种可能的实现。

以下组件需要进行一些 ACL 检查:

/**
 * Display a user record.
 * 
 * A deletion link is added if the logged user has sufficient permissions to
 * delete the record.
 */
function UserRecord({ username, email, avatar, isGranted, deleteUser }) {
  return (
    <div>
      <img src={avatar} />
      <b>{username}</b>
      {isGranted("DELETE_USER")
        ? <button onClick={deleteUser}>{"Delete"}</button>
        : null
      }
    </div>
  )
}

我们需要将其连接到我们的商店以正确水化所有 Prop :

export default connect(
  (state) => ({
    isGranted: (perm) => state.loggedUser.permissions.has(perm),
  }),
  {deleteUser},
  (stateProps, dispatchProps, ownProps) => ({
    ...stateProps,
    ...ownProps,
    deleteUser: () => dispatchProps.deleteUser(ownProps.user)
  })
)(UserRecord)

• connect 的第一个参数将为登录用户创建 isGranted。这部分可以使用reselect来完成，以提高性能。

• 第二个参数将绑定(bind)操作。这里没什么特别的。

• 第三个参数将合并所有 Prop 并将它们传递给包装的组件。 deleteUser 绑定(bind)到当前记录。

您现在可以使用 UserRecord 而无需处理 ACL 检查，因为它会根据 loggedUser 中存储的内容自动更新。

<UserRecord user={someUser} />

为了使上述示例正常工作，您需要将登录用户作为 loggedUser 存储在 Redux 的存储中。您不需要检查操作的 ACL，因为如果当前用户缺乏权限，UI 不会触发它们。此外，ACL 必须在服务器端进行检查。