如何针对特定Keycloak用户隐藏React数据表中的指定图标

1. 获取Keycloak用户角色 #

确保你的React项目已集成Keycloak（常用@react-keycloak/web库），在组件内通过Hook获取实例并判断用户角色：

import { useKeycloak } from '@react-keycloak/web';

// 组件内部逻辑
const { keycloak } = useKeycloak();

// 判断是否为管理员（替换为你实际的角色名）
// Realm角色用hasRealmRole，客户端角色用hasResourceRole('admin', '你的客户端ID')
const isAdmin = keycloak?.hasRealmRole('admin') ?? false;

// 处理Keycloak初始化状态，避免undefined报错
if (!keycloak) {
  return <div>加载中...</div>;
}

2. 动态生成权限控制的操作列表 #

将操作分为所有用户可见的基础操作和管理员专属操作，根据角色动态合并：

// 基础操作：所有用户可见
const baseActions = [
  {
    icon: 'email',
    tooltip: t('send-email'),
    onClick: (event: any, rowData: Information) => {
      onSendEmail(rowData);
    },
  },
  {
    icon: 'add',
    isFreeAction: true,
    onClick: () => {
      handleOpen();
    },
  },
];

// 管理员专属操作：仅管理员可见
const adminExclusiveActions = [
  {
    icon: 'edit',
    onClick: () => {
      handleOpen();
      // TODO: 编辑行逻辑
    },
  },
  {
    icon: 'delete',
    onClick: () => {
      handleClick();
      // TODO: 删除行逻辑
    },
  },
];

// 合并操作列表
const tableActions = isAdmin 
  ? [...baseActions, ...adminExclusiveActions] 
  : baseActions;

3. 更新DataTable组件的Props #

把动态生成的tableActions传入DataTable的actions属性：

<Grid item>
  <DataTable
    title={'TableTitle'}
    columns={tableColumns}
    data={product.information ?? []}
    headerStyle={headerStyle}
    actions={tableActions} // 替换原固定数组
  ></DataTable>
  {/* 弹窗组件保持原有逻辑 */}
  <AddInformationDialog
    id="addInformationDialog"
    keepMounted
    handleClose={handleClose}
    onAddInformation={onAddInformation}
    open={open}
  ></AddInformationDialog>
  <ConfirmationDialog
    id="deleteDialog"
    keepMounted
    open={openDelete}
    onClose={handleCloseDelete}
    value={value}
  ></ConfirmationDialog>
</Grid>

注意事项 #

• 角色名称需与Keycloak后台配置完全一致（区分大小写）
• 若使用客户端角色而非Realm角色，调用keycloak.hasResourceRole('角色名', '客户端ID')判断
• 必须等Keycloak实例初始化完成后再做角色判断，避免undefined错误

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