基于 RBAC 的前端权限管理实现教程
1. 介绍 RBAC 及其在前端的应用
RBAC（基于角色的访问控制，Role-Based Access Control）是一种常见的权限管理方式，核心思想是 用户（User）通过角色（Role）获得访问某些资源（菜单 Menu）的权限。
在前端，RBAC 主要应用在以下场景：
- 用户管理 - 维护系统中的用户，并给用户分配角色。
- 角色管理 - 创建和维护角色，并设置角色可访问的菜单。
- 菜单管理 - 维护系统的功能菜单，并控制哪些角色可以访问。
- 路由权限 - 通过角色动态渲染可访问的菜单和页面。
- 按钮权限 - 控制不同角色是否可以使用某些功能，如“删除用户”或“编辑订单”。
RBAC 在前端的工作流程
- 用户登录后，前端获取用户信息及其角色
- 根据角色获取对应的菜单
- 前端根据权限渲染菜单
- 路由守卫拦截无权限的访问
- 按钮权限控制
2. 用户、角色、菜单的关系
在 RBAC 模型中，用户、角色、菜单 之间的关系如下：
- 用户（User） ：系统的使用者，可以属于多个角色。
- 角色（Role） ：权限集合，不同角色拥有不同的权限。
- 菜单（Menu） ：系统功能的导航，只有拥有该权限的角色才能访问。
示例：
| 用户 | 角色 | 可访问菜单 |
|---|---|---|
| 张三 | 管理员 | 用户管理、订单管理、财务报表 |
| 李四 | 运营 | 订单管理 |
| 王五 | 财务 | 财务报表 |
这样，用户的权限是由其角色决定的，而不是直接赋予权限，使权限管理更加清晰和可扩展。
3. 前端如何实现 RBAC
3.1. 获取用户信息
用户登录成功后，前端需要向后端请求用户的角色和权限信息。例如，后端返回如下数据：
{"userId": 1,"username": "zhangsan","roles": ["admin"],"permissions": ["view_users", "edit_users", "view_orders"],"menu": [{ "name": "用户管理", "path": "/users", "permission": "view_users" },{ "name": "订单管理", "path": "/orders", "permission": "view_orders" }]
}
前端调用 API 获取数据：
import axios from "axios";async function getUserPermissions() {try {const response = await axios.get("/api/user/info");return response.data;} catch (error) {console.error("获取用户权限失败", error);return null;}
}
3.2. 根据权限动态渲染菜单
前端需要根据用户的 权限信息 渲染菜单。例如，如果用户没有 view_users 权限，则 不显示“用户管理”菜单。
代码示例：
function filterMenu(menu, userPermissions) {return menu.filter(item => userPermissions.includes(item.permission));
}async function loadMenu() {const userData = await getUserPermissions();if (userData) {const filteredMenu = filterMenu(userData.menu, userData.permissions);console.log("用户可访问的菜单：", filteredMenu);}
}loadMenu();
这样，用户只能看到自己有权限的菜单。
3.3. 路由权限控制
前端通常使用 Vue Router 或 React Router 来管理路由，我们可以通过 路由守卫（Navigation Guards） 进行权限控制。
示例（Vue Router）：
import { createRouter, createWebHistory } from "vue-router";
import store from "@/store"; // Vuex 存储用户权限const routes = [{ path: "/dashboard", component: () => import("@/views/Dashboard.vue") },{ path: "/users", component: () => import("@/views/Users.vue"), meta: { permission: "view_users" } },{ path: "/orders", component: () => import("@/views/Orders.vue"), meta: { permission: "view_orders" } }
];const router = createRouter({ history: createWebHistory(), routes });// 路由权限校验
router.beforeEach((to, from, next) => {const userPermissions = store.state.permissions; // 获取用户权限if (to.meta.permission && !userPermissions.includes(to.meta.permission)) {return next("/403"); // 无权限，跳转到 403 页面}next();
});export default router;
当用户访问 /users 页面时，系统会检查该用户是否有 view_users 权限，如果没有，则会跳转到 403 无权限页面。
3.4. 按钮权限控制
除了控制菜单和路由，还需要控制按钮权限。例如，只有 edit_users 权限的用户才能看到“编辑用户”按钮。
Vue 代码示例：
<template><button v-if="permissions.includes('edit_users')">编辑用户</button>
</template><script>
export default {computed: {permissions() {return this.$store.state.permissions;}}
};
</script>
4. RBAC 关键管理功能
为了让管理员可以控制用户、角色、菜单，前端通常需要实现 用户管理、角色管理、菜单管理 这三大功能。
4.1. 用户管理
✅ 添加用户
✅ 删除用户
✅ 编辑用户信息
✅ 为用户分配角色
async function addUser(userData) {await axios.post("/api/user/add", userData);
}
async function deleteUser(userId) {await axios.delete(`/api/user/delete/${userId}`);
}
4.2. 角色管理
✅ 添加角色
✅ 删除角色
✅ 编辑角色信息
✅ 为角色分配菜单
async function addRole(roleData) {await axios.post("/api/role/add", roleData);
}
async function assignMenusToRole(roleId, menuIds) {await axios.post(`/api/role/assign-menus`, { roleId, menuIds });
}
4.3. 菜单管理
✅ 添加菜单
✅ 删除菜单
✅ 编辑菜单
✅ 控制菜单访问权限
async function addMenu(menuData) {await axios.post("/api/menu/add", menuData);
}
async function deleteMenu(menuId) {await axios.delete(`/api/menu/delete/${menuId}`);
}
5. 总结
前端实现 RBAC 的核心步骤：
- 获取用户信息（登录后获取角色、权限、菜单）
- 根据权限渲染菜单（前端过滤无权限菜单）
- 路由守卫控制访问（拦截无权限用户）
- 按钮权限控制（隐藏无权限的按钮）
- 提供权限管理界面（管理员可以管理用户、角色、菜单）
完整的流程
1️⃣ 创建角色（管理员、财务、运营）
2️⃣ 创建菜单（用户管理、订单管理）
3️⃣ 为角色分配菜单权限（管理员可访问全部，运营仅订单管理）
4️⃣ 创建用户并分配角色（张三是管理员，李四是运营）
5️⃣ 前端根据权限动态渲染菜单，并控制页面和按钮访问
💡 这样，我们就实现了完整的 RBAC 前端权限管理！🚀