前端权限控制设计:拒绝硬编码权限判断
背景与挑战
本文探讨前端权限控制的设计方案。避免在页面中硬编码权限判断,否则将导致管理复杂。
为什么需要权限控制设计
最近看到一个项目,权限判断散落在 100 个文件里,改一个权限规则要改 100 处,维护成本极高。需警惕权限逻辑混乱的风险。
反面案例
// 反面案例:分散的权限判断
// 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)
// 正确姿势:RBAC 权限控制
// permissions/index.js
const permissions = {
admin: ['*'], // 所有权限
manager: ['user:view', 'user:edit', ],
: [, ]
};
() {
userPermissions = permissions[user.] || [];
userPermissions.() || userPermissions.(permission);
}
permissionDirective = {
() {
{ value } = binding;
user = store..;
(!(user, value)) {
el.();
}
}
};


