设置 redux 操作的权限

Question

我正在创建一个 web redux-react 应用程序，该应用程序将具有许多不同的权限级别。许多用户可能正在与一个数据进行交互，但有些用户可能会限制他们可以做什么。

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

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

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

积分：

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

Answer 1

我认为检查权限不是动作创建者的责任，但使用 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>
  )
}

我们需要将它连接到我们的商店以正确地为所有道具补水：

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 来提高性能。

• 第二个参数将绑定动作。这里没什么特别的。

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

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

<UserRecord user={someUser} />

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

Answer 2

您可以设置一个辅助函数，该函数将内置到用于检查用户权限（本地或远程）的操作中，您还可以在错误时提供回调操作创建器。当然需要redux-thunk 或类似名称，以便您可以从其他操作中分派操作。

您应该在这里遵守的关键规则是：

reducer 是纯函数。

动作创建者可能不纯。这意味着在给定相同参数的情况下，reducers 总是返回相同的值。在 reducer 中检查 ACL 权限将违反该规则。

假设您需要获取联系人列表。您的操作是REQUEST_CONTACTS。动作创建者首先会派发类似的东西：

// ACL test function
function canAccessContacts(dispatch) {
    if (user !== 'cool') {
        dispatch({type: 'ACCESS_DENIED'});
        return false;
    }
}

// Action creator
function fetchContacts() {
    return (dispatch) => {
        if (!canAccessContacts(dispatch)) {
            return false;
        }

        // your logic for retrieving contacts goes here
        dispatch({
            type: 'RECEIVE_CONTACTS',
            data: your_contacts_data_here
        });
      };
}

RECEIVE_CONTACTS 将在您返回数据后被触发。 REQUEST_CONTACTS 和 RECEIVE_CONTACTS（可能是异步调用）之间的时间是显示加载指示器的机会。

当然，这是一个非常原始的例子，但它应该能让你继续前进。