前端权限控制设计：避免硬编码权限判断

前端权限控制设计：避免硬编码权限判断

为什么需要权限控制设计

权限判断散落在多个文件中会导致维护成本极高。修改一个权限规则可能需要修改多处代码，极易引发混乱。

反面教材

// 反面教材：分散的权限判断
// Page1.jsx
if (user.role !== 'admin') {
  return <div>无权限</div>;
}

// Page2.jsx
if (!user.permissions.includes('user:view')) {
  return <div>无权限</div>;
}

// Page3.jsx
if (user.role !== 'admin' && user.role !== 'manager') {
  return <div>无权限</div>;
}
// ... 还有 97 个页面

权限判断散落各处，会导致维护成本急剧上升。

前端权限控制的正确姿势

1. 基于角色的权限控制（RBAC）

// 正确姿势：RBAC 权限控制
// permissions/index.js
const permissions = {
  admin: ['*'], // 所有权限
  manager: ['user:view', 'user:edit', 'report:view'],
  user: [, ]
};


  () {
   userPermissions = permissions[user.] || [];
   userPermissions.() || userPermissions.(permission);
}