React中如何仅当登录用户为ADMIN时展示用户列表删除按钮

实现步骤 #

你之前的写法是判断列表中被遍历用户的权限，自然只有列表里的ADMIN用户才会显示删除按钮，要判断当前登录用户的权限，按以下步骤修改即可：

1. 确保UserList组件能拿到当前登录用户的权限信息
   你UserList的state中已经定义了user字段，先确保这个字段存储的是当前已登录的用户信息（如果登录信息存在全局状态/Context/Props中，你可以在componentDidMount中同步更新到state.user里）。
2. 给UserListItem传递当前登录用户的权限标识
   修改UserList中渲染UserListItem的代码，新增isCurrentAdmin属性传递权限判断结果：

{this.state.page.content.map((user) => (
    <div key={user.id} className="col-xl-4 col-m-12 mb-4">
    <UserListItem 
        user={user} 
        onClickDeleteMember={() => apiCalls.deleteMember(user.id)}
        isCurrentAdmin={this.state.user?.authority === 'ADMIN'} 
    />
    </div>
))}

3. 在UserListItem中根据传入的权限标识控制删除按钮显示
   修改UserListItem中删除按钮的代码，加上权限判断：

<div className="float-right btn-group btn-group-m">
  {props.isCurrentAdmin && (
    <button  
        className="btn btn-secondary tooltips"  
        onClick={submit}
        data-placement="top" 
        data-toggle="tooltip" 
        data-original-title="Delete">
        <i className="fa fa-times"></i>
    </button>
  )}
</div>

注意：前端隐藏按钮只是交互层的优化，一定要在后端的删除用户接口上增加ADMIN权限校验，避免用户通过手动调用接口的方式绕过权限限制。

内容的提问来源于stack exchange，提问作者James Smith