基于 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}`);
}