React中如何从独立JS文件导出权限判断结果并在组件中使用

问题分析 #

你当前的代码存在两个核心问题：

1. useSelector 是React Hook，不能在模块顶层直接调用，只能在函数组件或自定义Hook内部使用
2. Redux中存储的permissions是数组类型，你直接通过permissions.resourceController访问属性是错误的，需要遍历数组判断

修正后的permission.js实现 #

将权限判断逻辑封装为自定义Hook，确保符合React Hook规则，同时正确处理数组类型的权限数据：

import { useSelector } from "react-redux";

// 自定义权限Hook，必须以use开头
export const usePermissions = () => {
  // 从Redux获取权限数据，默认空数组避免报错
  const permissions = useSelector((state) => state.permissions.data) || [];

  // 判断是否拥有全权限（匹配controller和action都为*的项）
  const canAll = permissions.some(
    perm => perm.resourceController === '*' && perm.resourceAction === '*'
  );

  // 单个权限判断：新增用户
  const canInsertUser = canAll || permissions.some(
    perm => perm.resourceController === 'Home' && perm.resourceAction === 'UserInsert'
  );

  // 单个权限判断：修改密码
  const canChangePassword = canAll || permissions.some(
    perm => perm.resourceController === 'Home' && perm.resourceAction === 'ChangePassword'
  );

  // 单个权限判断：编辑用户
  const canEditUser = canAll || permissions.some(
    perm => perm.resourceController === 'Home' && perm.resourceAction === 'UserEdit'
  );

  // 单个权限判断：删除用户
  const canDeleteUser = canAll || permissions.some(
    perm => perm.resourceController === 'Home' && perm.resourceAction === 'UserDelete'
  );

  // 通用权限判断函数，方便扩展其他权限
  const hasPermission = (controller, action) => {
    return canAll || permissions.some(
      perm => perm.resourceController === controller && perm.resourceAction === action
    );
  };

  // 导出所有权限状态和通用函数
  return {
    canAll,
    canInsertUser,
    canChangePassword,
    canEditUser,
    canDeleteUser,
    hasPermission
  };
};

在组件中使用权限判断 #

在任意函数组件中，通过调用自定义Hook获取权限状态，以此控制UI渲染或功能访问：

import { usePermissions } from './permission';

const UserPanel = () => {
  // 解构需要的权限状态
  const { 
    canInsertUser, 
    canEditUser, 
    canDeleteUser, 
    hasPermission 
  } = usePermissions();

  return (
    <div className="user-panel">
      {/* 根据权限显示按钮 */}
      {canInsertUser && <button onClick={() => {/* 新增用户逻辑 */}}>ثبت کاربر</button>}
      {canEditUser && <button onClick={() => {/* 编辑用户逻辑 */}}>ویرایش کاربر</button>}
      {canDeleteUser && <button onClick={() => {/* 删除用户逻辑 */}}>حذف کاربر</button>}
      
      {/* 使用通用函数判断其他权限 */}
      {hasPermission('Home', 'ChangePassword') && <button onClick={() => {/* 修改密码逻辑 */}}>تغییر کلمه عبور</button>}
    </div>
  );
};

export default UserPanel;

关键说明 #

• 自定义Hook命名必须以use开头，符合React Hook规范
• 使用Array.some()遍历权限数组，判断是否存在匹配的权限项
• 优先判断全权限canAll，减少重复逻辑
• 通用hasPermission函数可快速扩展新的权限判断，无需逐个定义单独变量

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