因此，我想出了另一种简便的方法来在前端实现基于角色的访问（RBAC）。

在您的redux存储状态下，创建一个名为权限的对象（或者您可以随意命名），如下所示：

const InitialState = {
  permissions: {}
};

然后在登录操作中，设置要提供的权限，如下所示：

InitialState['permissions'] ={
  canViewProfile: (role!=='visitor'),
  canDeleteUser: (role === 'coordinator' || role === 'admin')
  // Add more permissions as you like
}

在第一个权限中，您说如果您不是访客，则可以查看个人资料。在第二个权限中，您说的是只有管理员或协调员才能删除用户。根据登录用户的角色，这些变量将为true或false。因此，在您的商店状态下，您将拥有一个权限对象，该对象带有代表权限的键，并且其值将根据您的角色来确定。

然后在您的组件中使用存储状态获取权限对象。您可以使用connect来执行此操作，例如：

const mapStateToProps = (state) => {
  permissions : state.permissions
}

然后将这些道具连接到您的组件，例如：

export default connect(mapStateToProps,null)(ComponentName);

然后，您可以在要在条件上显示的任何特定元素上的组件内部使用这些道具，如下所示：

{(this.props.permissions.canDeleteUser) && <button onClick={this.deleteUser}>Delete User</button>}

上面的代码将确保仅当您具有删除用户的权限时才显示“删除用户”按钮，即在商店状态权限对象中，canDeleteUser的值为true。

就是这样，您已经应用了基于角色的访问。您可以使用此方法，因为它易于扩展和可变，因为您将根据角色的所有权限集中在一处。

希望这可以帮助！如果我错过了什么，请在评论中帮助我。:-)