React如何通过AccessControl包装组件拦截按钮点击前的权限校验

核心思路是让AccessControl组件接管子按钮的点击逻辑，先执行权限校验，只有校验通过才放行原点击事件，拒绝时直接阻止原函数执行。

实现AccessControl组件 #

通过React.cloneElement包装子组件的onClick方法，注入权限校验逻辑：

import React from 'react';

const AccessControl = ({ children, requiredPermission, onPermissionDenied }) => {
  // 替换为你的真实权限校验逻辑（比如从全局状态/后端接口获取）
  const hasPermission = () => {
    return window.currentUser?.permissions.includes(requiredPermission);
  };

  // 包装原点击事件，加入权限校验
  const wrapClickHandler = (originalOnClick) => {
    return (event) => {
      if (!hasPermission()) {
        // 权限拒绝时的处理，优先使用传入的回调，否则用默认提示
        if (onPermissionDenied) {
          onPermissionDenied();
        } else {
          alert('无权限执行此操作');
        }
        return; // 阻止原事件执行
      }
      // 权限通过，执行原点击逻辑
      if (originalOnClick) {
        originalOnClick(event);
      }
    };
  };

  // 遍历并处理所有子元素（支持多个子组件，但通常是单个按钮）
  return React.Children.map(children, (child) => {
    if (React.isValidElement(child)) {
      return React.cloneElement(child, {
        onClick: wrapClickHandler(child.props.onClick)
      });
    }
    return child;
  });
};

export default AccessControl;

使用方式 #

直接将UltimateButton嵌套在AccessControl中，传入需要校验的权限：

import UltimateButton from './UltimateButton';
import AccessControl from './AccessControl';

// 原有的创建文档函数
const create_new_doc = () => {
  console.log('开始创建新文档');
  // ...你的业务逻辑
};

const YourComponent = () => {
  return (
    <AccessControl 
      requiredPermission="create_new_doc"
      onPermissionDenied={() => {
        // 自定义权限拒绝提示，比如用项目中的全局弹窗组件
        console.log('权限不足，无法创建文档');
      }}
    >
      <UltimateButton onClick={create_new_doc}>创建新文档</UltimateButton>
    </AccessControl>
  );
};

export default YourComponent;

为什么之前cloneElement没解决？ #

大概率是没有正确包装原onClick事件——如果只是简单替换而没有保留原逻辑，或者权限校验的时机不对（比如没在点击时实时校验），都会导致拦截失效。上面的方案通过把原点击函数包裹在校验逻辑内部，确保每次点击都先做权限判断，再决定是否执行原函数。

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