引言
不久之前，我基于Vben Admin 5（Vben5）前端框架开发了一套全面的RBAC权限管理系统界面。这套系统涵盖了用户管理、角色分配、菜单配置以及细粒度的权限控制等核心功能模块。为了支持前端的高效开发与测试，我们不仅准备了通过Apifox定义的mock数据接口，还提供了Spring Boot和Flask两种不同技术栈的后端实现选项。而在本次介绍中，我们将重点探讨使用Koa2构建的后端解决方案，它为开发者提供了一种轻量且高效的Node.js服务器端选择，确保前后端无缝对接的同时，也体现了现代Web应用开发的灵活性与可扩展性。
技术选型
| 名称 | 网址 | 版本 | 备注 |
|---|---|---|---|
| NodeJs | nodejs.org/zh-cn | v20.16.0 | 作者在该版本下开发测试的 |
| Mysql | www.mysql.com/ | 5.6+、8.0+ | 数据库 |
| koa | www.koajs.net/ | ^2.15.3 | Web框架 |
| typeorm | typeorm.bootcss.com/ | ^0.3.20 | ORM框架 |
| jsonwebtoken | npmmirror.com/package/jso… | ^9.0.2 | jwt |
安装指南
后端工程
克隆项目
git clone https://gitee.com/mldong/mldong-koa.git
进入项目目录
cd mldong-koa
安装依赖包
npm install --registry=https://registry.npmmirror.com
创建数据库
doc/sql/mldong-plus1.0.sql
修改配置
.env.development
DB_HOST = "192.168.1.160"
DB_PORT = 3306
DB_USER = "root"
DB_PASSWORD = "8Eli#gr#AUk"
启动服务
npm run dev
前端工程
克隆项目
git clone https://gitee.com/mldong/mldong-vben5.git
进入项目目录
cd mldong-vben5
安装依赖包
pnpm install
修改配置
apps/web-antd/vite.config.mts
import { defineConfig } from '@vben/vite-config';
export default defineConfig(async () => {
return {
application: {
nitroMock: false,
},
vite: {
server: {
proxy: {
'/api': {
changeOrigin: true,
rewrite: (path) => path.replace(/^\/api/, ''),
// 代理目标地址
target: 'http://localhost:3000',
ws: true,
},
},
},
},
};
});
启动服务
pnpm run dev:antd
访问
账号密码：superAdmin/123456
演示效果
登录
首页
用户管理
角色管理
授权菜单
成员管理
菜单管理
前端路由
可通过同步路由菜单将前端路由同步到菜单管理
结语
目前，我们已成功实现了系统最核心的功能模块，包括用户管理、角色分配、权限控制以及菜单配置。这些基础构建块为系统的安全性和灵活性提供了坚实保障。展望未来，我们将持续迭代，逐步丰富和完善其他高级功能，致力于为用户提供一个更加全面且高效的RBAC权限管理解决方案。在此过程中，我们诚挚地邀请广大开发者和爱好者们保持关注，一同见证这一旅程中的每一个进步与创新。
