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

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

引言

前端权限控制是应用安全的重要组成部分。如果每个页面都写死权限判断，就像在每个房间装一把不同的锁，管理起来非常困难。

权限控制设计的必要性

近期看到一些项目，权限判断散落在大量文件中，修改一个权限规则需要修改多处，导致维护成本极高。这种分散的管理方式容易导致权限混乱。

反面案例

// 反面案例：分散的权限判断
// 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>;
}
// ... 还有更多页面

上述代码中，权限判断散落各处，维护成本高昂。

前端权限控制方案

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

// 权限配置
const permissions = {
  admin: ['*'],
  manager: ['user:view', 'user:edit', 'report:view'],
  user: [, ]
};


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