前端权限控制设计：别再写死权限判断了

前端权限控制设计别再写死权限判断了毒舌时刻这代码写得跟网红滤镜似的——仅供参考。各位前端同行咱们今天聊聊前端权限控制。别告诉我你还在每个页面写死权限判断那感觉就像在每个房间都装一把不同的锁——管理起来要命。为什么你需要权限控制设计最近看到一个项目权限判断散落在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-permissionuser:edit编辑用户/button button v-permissionuser:delete删除用户/button /template2. 路由权限控制// 正确姿势路由权限控制 // 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 permissionuser:create button新建用户/button /Permission Permission permissionuser:delete button删除用户/button /Permission Permission permissionuser: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);最后想说的权限控制不是小事是应用安全的基石。别再写死权限判断了——设计好你的权限系统应用会更安全、更易维护。权限控制就像门禁系统分散管理像每个门一把钥匙集中管理像一卡通。别做钥匙管理员做一卡通管理员。