前端权限控制设计
问题背景
这段代码风格不够规范——仅供参考。
各位前端同行，咱们今天聊聊前端权限控制。别告诉我你还在每个页面写死权限判断，那感觉就像在每个房间都装一把不同的锁——管理起来非常困难。
为什么你需要权限控制设计
最近看到一个项目，权限判断散落在 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(); });
