当前位置：首页 > React

react 按钮权限管理实现

2026-01-27 10:34:19React

按钮权限管理实现方案

在React中实现按钮权限管理通常需要结合后端权限数据和前端状态管理。以下是几种常见的实现方式：

基于角色或权限码的渲染控制

通过获取用户权限列表或角色信息，在渲染按钮时进行条件判断：

const ButtonWithPermission = ({ permission, children }) => {
  const userPermissions = useSelector(state => state.auth.permissions);

  if (!userPermissions.includes(permission)) {
    return null;
  }

  return children;
};

// 使用方式
<ButtonWithPermission permission="create_user">
  <Button>创建用户</Button>
</ButtonWithPermission>

高阶组件封装

创建高阶组件包装需要权限控制的按钮：

react 按钮权限管理实现

function withPermission(Component, requiredPermission) {
  return function WrappedComponent(props) {
    const hasPermission = checkPermission(requiredPermission);

    if (!hasPermission) {
      return null;
    }

    return <Component {...props} />;
  };
}

// 使用方式
const AdminButton = withPermission(Button, 'admin_access');

自定义Hook实现

使用自定义Hook统一管理权限逻辑：

function usePermission(permission) {
  const [hasPermission, setHasPermission] = useState(false);

  useEffect(() => {
    async function check() {
      const result = await checkUserPermission(permission);
      setHasPermission(result);
    }
    check();
  }, [permission]);

  return hasPermission;
}

// 使用方式
function AdminPanel() {
  const canEdit = usePermission('edit_content');

  return (
    <div>
      {canEdit && <button>编辑内容</button>}
    </div>
  );
}

权限指令式组件

仿照Vue的v-permission思路创建指令式组件：

react 按钮权限管理实现

const Permission = ({ children, authority }) => {
  const currentAuthority = getCurrentAuthority();

  if (!checkPermissions(authority, currentAuthority)) {
    return null;
  }

  return children;
};

// 使用方式
<Permission authority="delete">
  <Button danger>删除</Button>
</Permission>

全局权限注入方案

通过Context提供全局权限信息：

const PermissionContext = createContext();

const PermissionProvider = ({ children, permissions }) => {
  return (
    <PermissionContext.Provider value={permissions}>
      {children}
    </PermissionContext.Provider>
  );
};

const usePermissions = () => useContext(PermissionContext);

// 使用方式
function App() {
  return (
    <PermissionProvider permissions={['read', 'write']}>
      <Content />
    </PermissionProvider>
  );
}

function Content() {
  const permissions = usePermissions();

  return (
    <div>
      {permissions.includes('write') && <button>保存</button>}
    </div>
  );
}

后端动态路由集成方案

结合路由配置实现页面级和按钮级权限控制：

// 假设从后端获取的路由配置包含权限信息
const routes = [
  {
    path: '/admin',
    component: AdminPage,
    meta: {
      permissions: ['admin_access']
    }
  }
];

// 路由守卫中检查权限
function checkRoutePermission(to) {
  const userPermissions = store.getters.permissions;
  const requiredPermissions = to.meta?.permissions || [];

  return requiredPermissions.every(perm => 
    userPermissions.includes(perm)
  );
}