答案：前端RBAC通过用户角色动态控制权限，核心包括用户、角色、权限三要素；登录后获取权限数据并存储，封装hasPermission函数校验权限，结合路由守卫实现页面级控制，动态渲染菜单时过滤无权限项，并可用自定义指令简化按钮级权限判断，关键在于统一入口与前后端权限一致。
权限控制在现代前端应用中非常常见，尤其是企业级管理系统。RBAC（Role-Based Access Control，基于角色的访问控制）是一种广泛使用的权限管理模型。它通过将权限分配给角色，再将角色赋予用户，从而实现灵活的权限管理。在前端实现 RBAC 模型，主要是根据用户的角色动态控制页面、菜单、按钮等元素的可见性与可操作性。
1. 理解 RBAC 核心概念
RBAc 包含三个核心要素：
- 用户（User）：系统中的操作者，如管理员、普通员工。
- 角色（Role）：代表一组权限的集合，如“管理员”、“编辑”、“访客”。
- 权限（Permission）：具体的操作能力，如“创建用户”、“删除文章”、“查看报表”。
用户拥有一个或多个角色，角色包含多个权限。前端需要根据当前用户的权限来决定是否展示某些功能。
2. 前端如何获取权限数据
通常在用户登录后，后端返回用户信息，包括其角色和权限列表。例如：
立即学习“Java免费学习笔记（深入）”；
{
"userId": 1001,
"username": "alice",
"roles": ["admin"],
"permissions": [
"user:create",
"user:delete",
"post:edit",
"report:view"
]
}
前端可以将这些数据存储在 Vuex、Pinia 或 React Context 中，方便全局使用。
3. 权限判断方法封装
可以封装一个权限校验函数，用于判断当前用户是否具备某项权限：
function hasPermission(permission) {
const user = JSON.parse(localStorage.getItem('user'));
return user?.permissions?.includes(permission);
}
使用方式：
{hasPermission('user:create') && <button>新增用户</button>}
4. 路由级别的权限控制
对于需要权限才能访问的页面，可以在路由守卫中进行拦截：
router.beforeEach((to, from, next) => {
const requiresAuth = to.matched.some(record => record.meta.requiresAuth);
const user = JSON.parse(localStorage.getItem('user'));
if (requiresAuth) {
if (!user) {
next('/login');
} else if (to.meta.permission && !user.permissions.includes(to.meta.permission)) {
next('/403'); // 无权限页面
} else {
next();
}
} else {
next();
}
});
路由配置示例：
{
path: '/users',
component: UserList,
meta: { requiresAuth: true, permission: 'user:view' }
}
5. 动态菜单渲染
菜单应根据用户权限动态生成。定义菜单结构时加入权限字段：
const menuList = [
{
name: '用户管理',
path: '/users',
permission: 'user:view',
children: [
{ name: '新增用户', path: '/users/create', permission: 'user:create' }
]
}
];
遍历时过滤无权限的菜单项：
function filterMenu(menus) {
return menus
.filter(menu => !menu.permission || hasPermission(menu.permission))
.map(menu => {
if (menu.children) {
menu.children = filterMenu(menu.children);
}
return menu;
});
}
6. 自定义指令简化权限控制
为了减少模板中重复的权限判断逻辑，可以注册自定义指令：
// Vue 示例
app.directive('permission', {
mounted(el, binding) {
const { value } = binding;
if (value && !hasPermission(value)) {
el.parentNode.removeChild(el);
}
}
});
使用方式：
<button v-permission="'user:delete'">删除用户</button>基本上就这些。前端 RBAC 实现不复杂但容易忽略细节，关键是统一权限判断入口，避免硬编码，并与后端保持权限定义一致。
