Jhipster React如何根据用户角色隐藏元素答案

【问题标题】：Jhipster React how to hide element based on user roleJhipster React如何根据用户角色隐藏元素
【发布时间】：2025-12-04 15:10:01
【问题描述】：

我正在使用 JHipster 5.0.1 和 React。我有三个按钮查看、编辑、删除。我希望删除按钮仅在用户是管理员时可用。

这是我的源代码。感谢您的帮助。

<td className="text-right">
   <div className="btn-group flex-btn-group-container">
      <Button tag={Link} to={`${match.url}/${kategori.id}`} color="info" size="sm">
          <FontAwesomeIcon icon="eye" />{' '}
          <span className="d-none d-md-inline">
              <Translate contentKey="entity.action.view">View</Translate>
          </span>
      </Button>
      <Button tag={Link} to={`${match.url}/${kategori.id}/edit`} color="primary" size="sm">
          <FontAwesomeIcon icon="pencil-alt" />{' '}
          <span className="d-none d-md-inline">
              <Translate contentKey="entity.action.edit">Edit</Translate>
          </span>
      </Button>
      <Button tag={Link} to={`${match.url}/${kategori.id}/delete`} color="danger" size="sm">
          <FontAwesomeIcon icon="trash" />{' '}
          <span className="d-none d-md-inline">
              <Translate contentKey="entity.action.delete">Delete</Translate>
          </span>
      </Button>
   </div>
</td>

【问题讨论】：

生成代码中有很多例子，看app.tsx，isAdmin prop使用hasAnyAuthority()，在header.tsx中使用
是的，它是 app.tsx 中的 const mapStateToProps。如何将身份验证注入 mapStateToProps 实体文件？谢谢

标签： reactjs jhipster

【解决方案1】：

处理连接的reducer 函数还在store 中设置isAdmin 属性。在生成的文件中有一个使用这个道具的例子。

查看src/main/webapp/app/app.tsx 了解如何从商店获取道具，查看src/main/webapp/app/shared/layout/header/header.tsx 了解如何使用该道具。

【讨论】：

【解决方案2】：

我不知道包含 isadmin 布尔值的变量是什么，但对于条件渲染，您可以这样做：

{ isadmin && 
  <Button tag={Link} to={`${match.url}/${kategori.id}/delete`} color="danger"   size="sm">
          <FontAwesomeIcon icon="trash" />{' '}
          <span className="d-none d-md-inline">
              <Translate contentKey="entity.action.delete">Delete</Translate>
          </span>
  </Button>
}

【讨论】：