如何优雅实现基于用户权限的页面按钮显隐控制？

针对你提到的用IF ELSE判断用户角色来控制按钮显隐的场景，这里提供几个更简洁易维护的实现方案：

方案一：封装权限判断高阶组件（HOC） #

• 封装一个通用的WithPermission高阶组件，接收所需角色参数和子组件
• 组件内部从Redux获取当前用户角色，自动完成权限校验
• 符合权限则渲染传入的按钮/组件，不符合则返回null

const WithPermission = ({ requiredRole, children }) => {
  const userRole = useSelector(state => state.user.role);
  return userRole === requiredRole ? children : null;
};

// 使用示例
<WithPermission requiredRole="admin">
  <Button>管理员专属操作</Button>
</WithPermission>

方案二：自定义权限控制Hook #

• 编写一个usePermission Hook，封装权限判断逻辑
• 在需要控制的组件中直接调用Hook获取权限状态，代码更简洁直观

const usePermission = (requiredRole) => {
  const userRole = useSelector(state => state.user.role);
  return userRole === requiredRole;
};

// 使用示例
const AdminOperationButton = () => {
  const hasAdminAccess = usePermission('admin');
  return hasAdminAccess ? <Button>管理员操作</Button> : null;
};

方案三：封装专属权限按钮组件 #

• 直接封装一个PermissionButton组件，内置权限校验逻辑
• 使用时只需传入所需角色和按钮的常规属性，无需额外判断

const PermissionButton = ({ requiredRole, ...buttonProps }) => {
  const userRole = useSelector(state => state.user.role);
  if (userRole !== requiredRole) return null;
  return <Button {...buttonProps} />;
};

// 使用示例
<PermissionButton 
  requiredRole="admin" 
  onClick={handleAdminTask}
>
  执行管理员任务
</PermissionButton>

方案四：权限配置化管理 #

• 将所有需要权限控制的按钮配置集中到一个文件，统一管理权限规则
• 在页面中根据用户角色过滤配置，动态渲染符合权限的按钮，避免代码中散落大量判断逻辑

// 权限配置文件 permissionConfigs.js
export const buttonConfigs = [
  {
    id: 'admin-delete',
    requiredRole: 'admin',
    component: <Button onClick={handleDelete}>删除数据</Button>
  },
  {
    id: 'user-edit',
    requiredRole: 'user',
    component: <Button onClick={handleEdit}>编辑资料</Button>
  }
];

// 页面中使用
const ActionButtonBar = () => {
  const userRole = useSelector(state => state.user.role);
  return (
    <div className="button-bar">
      {buttonConfigs
        .filter(config => config.requiredRole === userRole)
        .map(config => config.component)}
    </div>
  );
};

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