前端权限控制设计：别再写死权限判断了
前端权限控制设计：别再写死权限判断了
毒舌时刻
这代码写得跟网红滤镜似的——仅供参考。
各位前端同行，咱们今天聊聊前端权限控制。别告诉我你还在每个页面写死权限判断，那感觉就像在每个房间都装一把不同的锁——管理起来要命。
为什么你需要权限控制设计
最近看到一个项目，权限判断散落在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>; } // ... 还有97个页面 毒舌点评：这代码，我看了都替你的维护成本着急。权限判断散落各处，你是想让自己变成权限修改机器人吗？
前端权限控制的正确姿势
1. 基于角色的权限控制（RBAC）
// 正确姿势：RBAC权限控制 // permissions/index.js const permissions = { admin: ['*'], // 所有权限 manager: ['user:view', 'user:edit', 'report:view'], user: ['user:view', 'profile:edit'] }; // 权限检查函数 export function hasPermission(user, permission) { const userPermissions = permissions[user.role] || []; return userPermissions.includes('*') || userPermissions.includes(permission); } // 权限指令（Vue） const permissionDirective = { mounted(el, binding) { const { value } = binding; const user = store.getters.user; if (!hasPermission(user, value)) { el.remove(); } } }; // 使用 <template> <button v-permission="'user:edit'">编辑用户</button> <button v-permission="'user:delete'">删除用户</button> </template> 2. 路由权限控制
// 正确姿势：路由权限控制 // router/index.js const routes = [ { path: '/admin', component: AdminLayout, meta: { requiresAuth: true, roles: ['admin'] }, children: [ { path: 'users', component: UserManagement, meta: { permission: 'user:manage' } } ] } ]; // 路由守卫 router.beforeEach((to, from, next) => { const user = store.getters.user; if (to.meta.requiresAuth && !user) { next('/login'); return; } if (to.meta.roles && !to.meta.roles.includes(user.role)) { next('/403'); return; } if (to.meta.permission && !hasPermission(user, to.meta.permission)) { next('/403'); return; } next(); }); 3. 组件级权限控制
// 正确姿势：组件级权限控制 // components/Permission.jsx function Permission({ permission, children, fallback = null }) { const user = useUser(); if (!hasPermission(user, permission)) { return fallback; } return children; } // 使用 function UserPage() { return ( <div> <h1>用户管理</h1> <Permission permission="user:create"> <button>新建用户</button> </Permission> <Permission permission="user:delete"> <button>删除用户</button> </Permission> <Permission permission="user:export" fallback={<span>无导出权限</span>}> <button>导出数据</button> </Permission> </div> ); } 毒舌点评：早这么设计，你的权限早控制好了。别告诉我你还在写死权限判断，那你还是趁早去写静态页面吧。
实战技巧：权限控制指南
1. 权限设计原则
- 集中管理：权限配置集中存放
- 最小权限：只给必要的权限
- 动态获取：从服务端获取权限
- 前端校验：用户体验，后端兜底
2. 最佳实践
// ✅ 权限常量定义 const PERMISSIONS = { USER_VIEW: 'user:view', USER_CREATE: 'user:create', USER_EDIT: 'user:edit', USER_DELETE: 'user:delete' }; // ✅ 权限组合 const ADMIN_PERMISSIONS = [ PERMISSIONS.USER_VIEW, PERMISSIONS.USER_CREATE, PERMISSIONS.USER_EDIT, PERMISSIONS.USER_DELETE ]; // ✅ 权限检查 const canEditUser = hasPermission(user, PERMISSIONS.USER_EDIT); 最后想说的
权限控制不是小事，是应用安全的基石。别再写死权限判断了——设计好你的权限系统，应用会更安全、更易维护。
权限控制就像门禁系统，分散管理像每个门一把钥匙，集中管理像一卡通。别做钥匙管理员，做一卡通管理员。