《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. 与前端接口的联调要点。

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

相关推荐
困惑阿三16 分钟前
React 展示Markdown内容
前端·react.js·前端框架
lichong9511 小时前
【大前端++】Android studio Log日志高对比度配色方案
android·java·前端·json·android studio·大前端·大前端++
没头脑的男大1 小时前
如何把pdf转换的excell多个表格合并
java·前端·pdf
妄小闲1 小时前
html网站模板 html网页设计模板源码网站
前端·html
Restart-AHTCM2 小时前
前端核心框架vue之(路由篇3/5)
前端·javascript·vue.js
段振轩2 小时前
Docker nginx容器部署前端项目。
前端·nginx·docker
让时光到此为止。2 小时前
vue的首屏优化是怎么做的
前端·javascript·vue.js
温宇飞3 小时前
CSS 中如何处理空白字符
前端
dengzhenyue3 小时前
矩形碰撞检测
开发语言·前端·javascript
llq_3503 小时前
为什么 npm view yarn version 显示 1.22.22?
前端