《NestJS 实战:RBAC 系统管理模块开发 (一)》

前言

大家好,我是 elk!经过之前「从0搭建NestJS后端服务」系列的学习,我们已经拥有了一个坚实的后端基础骨架。现在,是时候为它注入业务灵魂了! 本系列我们将聚焦于企业应用中至关重要的 系统管理模块 ,使用 RBAC(基于角色的访问控制) 权限模型,从前端界面到后端逻辑,实现一套完整的解决方案。

如果你只关注后端逻辑也没关系,我们将提供清晰的接口定义,你可以方便地使用 Apifox 等工具进行测试。当然,结合配套的前端管理界面(基于我之前开发的 Vue2 项目)进行开发,体验会更完整。

功能模块规划

本次系统管理模块将涵盖以下核心功能:

  • 菜单管理: 定义系统导航结构和权限标识。
  • 用户管理: 管理系统用户账号、信息及状态。
  • 角色管理: 定义角色并分配权限(菜单、数据等)。
  • 部门管理: 构建组织架构树。
  • 字典管理: 维护系统常用枚举值、状态码等静态数据。

前后端目录结构预览

  • 前端界面 (Vue2 项目) 主要结构:
bash 复制代码
- 系统管理
    ├── 菜单管理
    ├── 用户管理
    ├── 角色管理
    ├── 部门管理
    └── 字典管理
  • 后端服务 (NestJS 项目) 核心目录 (src/modules/system/):
bash 复制代码
system/
├── menu/                 # 菜单模块
│   ├── dto/              # 数据传输对象
│   │   ├── create-menu.dto.ts
│   │   ├── list-menu.dto.ts
│   │   └── update-menu.dto.ts
│   ├── entities/         # 实体定义 (TypeORM)
│   │   └── menu.entity.ts
│   ├── menu.controller.ts # 控制器 (路由)
│   ├── menu.module.ts     # 模块定义
│   └── menu.service.ts    # 业务逻辑服务
├── user/                 # 用户模块 (结构类似 menu/)
├── role/                 # 角色模块 (结构类似 menu/)
├── dept/                 # 部门模块 (结构类似 menu/)
└── dict/                 # 字典模块 (结构类似 menu/)

user, role, dept, dict 目录结构将与 menu 保持一致,包含各自的 dto, entities, controller, module, service 文件。

界面概念图 (示意):

数据库设计 (核心表)

基于 RBAC 模型和功能需求,我们设计了以下核心数据库表:

  1. 基础实体表 (4张):

    • sys_menu (菜单表): 存储菜单/权限项信息 (名称、路由、图标、类型、排序、父ID等)。
    • sys_user (用户表): 存储用户账号信息 (用户名、密码、昵称、邮箱、手机、部门ID、状态等)。
    • sys_role (角色表): 存储角色信息 (角色名、角色标识、描述、状态等)。
    • sys_dept (部门表): 存储部门信息 (部门名、负责人、联系电话、状态、父ID等,构成树形结构)。
    • sys_dict_type (字典类型表): 存储字典分类 (类型名、类型标识、状态、描述等)。
  2. 字典数据表 (1张):

    • sys_dict_data (字典数据表): 存储具体的字典键值对 (字典标签、字典值、排序、状态、关联的 dict_type_id 等)。
  3. 关联关系表 (3张):

    • sys_user_role (用户-角色关联表): user_id 关联 sys_user.id, role_id 关联 sys_role.id
    • sys_role_menu (角色-菜单关联表): role_id 关联 sys_role.id, menu_id 关联 sys_menu.id (定义角色权限)。
    • sys_role_dept (角色-部门数据权限关联表 - 可选但推荐 ): role_id 关联 sys_role.id, dept_id 关联 sys_dept.id (用于实现基于部门的数据范围控制)。

数据库关系图 (ER Diagram 示意):

前后端协作方式

  • 后端 (NestJS): 负责提供清晰、规范的 RESTful API 接口,实现核心业务逻辑、数据存取和权限校验。
  • 前端 (Vue2): 负责构建用户界面,调用后端 API 进行数据交互和展示,实现用户操作流程。
  • 接口调试: 所有后端 API 将提供详细的文档说明(或通过 Swagger 生成),方便使用
  • Apifox、Postman 等工具进行独立测试。即使不运行前端项目,也能完整验证后端功能。

下篇预告

准备工作就绪!下一篇,我们将正式动手编码,从 菜单管理 (Menu Module) 开始! 我们将深入探讨:

  1. 菜单实体 (MenuEntity) 的定义与字段设计。
  2. 创建、查询、更新、删除菜单的 DTO (Data Transfer Object) 设计。
  3. 菜单 CRUD 接口 (MenuController) 的实现。
  4. 菜单层级结构(树形)的处理逻辑 (MenuService)。
  5. 与前端接口的联调要点。

敬请期待!感谢大家的关注与支持!

相关推荐
孜然卷k3 分钟前
前端样式CSS设置 display: ‘grid‘, gridTemplateColumns: ‘repeat(4, 1fr)‘ 部分电脑展示内容溢出
前端·css
弓长三虎20 分钟前
linux 命令审计
linux·运维·服务器·前端
EndingCoder23 分钟前
React Native 导航系统实战(React Navigation)
前端·react native·react.js·前端框架·跨端
中微子31 分钟前
React 避坑指南:如何正确获取自定义组件的 DOM 引用?
前端
guang光33 分钟前
Windows上通过gitbash使用Rsync
前端
小华同学ai34 分钟前
真香,Cursor懂的都懂(学习用哈),22.5k一键重置Cursor试用限制!被全网疯狂收藏!
前端·后端·github
ytttr87335 分钟前
docker快速部署OS web中间件 数据库 编程应用
前端·docker·中间件
刺客-Andy36 分钟前
React 第五十八节 Router中StaticRouterProvider的使用详解及案例
前端·react.js·前端框架
korgs38 分钟前
20、React常用API和Hook索引
前端·react.js·前端框架