NiceFish权限控制：RBAC权限模型在前端后端的完整实现

【免费下载链接】NiceFish🚀🚀🚀NiceFish（美人鱼） 是一个系列项目，目标是示范前后端分离的开发+部署模式，包括: 浏览器环境、移动端环境、Electron 环境；后端有两个版本：SpringBoot 版本和 SpringCloud 版本。请不要吝惜你的⭐️ Star ⭐️，星星越多，动力越足。下一个版本会引入 Angular 最新的 signal 特性。项目地址: https://gitcode.com/gh_mirrors/ni/NiceFish

NiceFish（美人鱼）是一个示范前后端分离开发+部署模式的系列项目，涵盖浏览器、移动端和Electron环境，后端提供SpringBoot和SpringCloud两个版本。本文将详细介绍NiceFish中RBAC权限模型的完整实现方案，帮助开发者理解如何在前后端架构中构建安全、灵活的权限控制系统。

什么是RBAC权限模型？

RBAC（基于角色的访问控制）是一种广泛应用的权限管理方法，通过将权限分配给角色，再将角色分配给用户，实现对系统资源的精细化访问控制。相比传统的直接权限分配方式，RBAC具有以下优势：

• 简化权限管理：通过角色批量管理用户权限，减少重复操作
• 增强安全性：基于最小权限原则，避免权限过度分配
• 提升可维护性：权限变更只需调整角色配置，无需修改大量用户权限

NiceFish采用RBAC模型实现了完整的权限控制体系，包括用户-角色-权限的三级关联关系，同时支持前后端双重权限校验。

NiceFish权限控制的核心实现

权限控制的系统架构

NiceFish的权限控制系统采用前后端分离架构，前端负责页面级和组件级权限控制，后端负责接口级权限验证，形成完整的权限防护体系。系统主要包含以下模块：

• 用户管理模块：src/app/manage/permission/user-table/
• 角色管理模块：src/app/manage/permission/role-table/
• 权限管理模块：分为前端组件权限和后端接口权限
  • 前端组件权限：src/app/manage/permission/component-permission-table/
  • 后端接口权限：src/app/manage/permission/api-permission-table/

图1：NiceFish管理系统中的权限相关模块入口

后端接口权限实现

NiceFish后端采用Apache Shiro框架实现RBAC权限控制，使用通配符表达式定义接口权限。权限通配符格式如下：

资源:操作:实例

例如：user:read:*表示允许读取所有用户信息，post:write:100表示允许修改ID为100的文章。

在前端代码中，权限通配符的配置界面位于：src/app/manage/permission/api-permission-edit/api-permission-edit.component.html

前端页面权限实现

前端权限控制主要通过以下两种方式实现：

1. 路由守卫：在路由配置中添加权限校验，未授权用户无法访问受保护路由
2. 组件权限：通过指令控制页面元素的显示/隐藏，基于用户权限动态渲染界面

权限通配符的配置界面位于：src/app/manage/permission/component-permission-edit/component-permission-edit.component.html

角色管理与权限分配

角色创建与配置

在NiceFish中，角色是权限的集合，管理员可以通过角色管理界面创建和配置角色。角色管理模块提供以下功能：

• 创建新角色并设置基本信息
• 为角色分配后端接口权限
• 为角色分配前端页面权限
• 启用/禁用角色

图2：创建/编辑角色时配置后端接口权限和前端页面权限

角色编辑页面的代码实现位于：src/app/manage/permission/role-edit/role-edit.component.html

用户-角色关联

创建角色后，需要将用户与角色关联起来。用户管理模块提供了角色分配功能，支持为单个用户分配多个角色，用户将继承所有已分配角色的权限。

用户角色分配的实现位于：src/app/manage/permission/user-edit-role/user-edit-role.component.html

权限控制的最佳实践

前后端双重校验

为确保系统安全，NiceFish实现了前后端双重权限校验：

1. 前端校验：通过路由守卫和组件权限控制，提供良好的用户体验
2. 后端校验：所有接口请求必须通过权限验证，防止恶意访问

这种双重校验机制既保证了用户体验，又确保了系统安全。

权限粒度设计

NiceFish的权限设计采用细粒度控制，分为三个层级：

1. 页面级权限：控制用户是否可以访问某个页面
2. 操作级权限：控制用户是否可以执行某个操作（如新增、编辑、删除）
3. 数据级权限：控制用户可以访问哪些数据（如只能查看自己创建的内容）

通过这种多层次的权限设计，可以满足复杂业务场景的权限需求。

总结

NiceFish作为一个前后端分离的示范项目，提供了RBAC权限模型的完整实现方案。通过用户-角色-权限的三级架构，结合前后端双重校验机制，实现了安全、灵活的权限控制系统。开发者可以参考NiceFish的权限实现，快速构建自己项目的权限管理模块。

如果你对NiceFish的权限控制实现感兴趣，可以通过以下方式获取项目源码：

git clone https://gitcode.com/gh_mirrors/ni/NiceFish

项目的权限相关代码主要集中在src/app/manage/permission/目录下，欢迎深入研究和交流。

【免费下载链接】NiceFish🚀🚀🚀NiceFish（美人鱼） 是一个系列项目，目标是示范前后端分离的开发+部署模式，包括: 浏览器环境、移动端环境、Electron 环境；后端有两个版本：SpringBoot 版本和 SpringCloud 版本。请不要吝惜你的⭐️ Star ⭐️，星星越多，动力越足。下一个版本会引入 Angular 最新的 signal 特性。项目地址: https://gitcode.com/gh_mirrors/ni/NiceFish