# 基于vue和express的rbac权限管理系统

**Repository Path**: carocall/basic-rbac

## Basic Information

- **Project Name**: 基于vue和express的rbac权限管理系统
- **Description**: 一个基于vue和express的rbac的权限管理系统，接口菜单分离模式。
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-04-04
- **Last Updated**: 2026-05-02

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 权限控制管理系统

一个基于 Vue + Express 的企业级权限管理系统，提供完整的用户、角色、权限和菜单管理功能。

## 技术栈

### 前端技术栈
| 技术 | 版本 | 说明 |
|------|------|------|
| Vue | 3.x | 渐进式 JavaScript 框架 |
| Vite | 6.x | 下一代前端构建工具 |
| Pinia | 2.x | Vue 状态管理库 |
| Element Plus | 2.x | Vue 3 UI 组件库 |
| Vue Router | 4.x | Vue 路由管理器 |

### 后端技术栈
| 技术 | 版本 | 说明 |
|------|------|------|
| Express | 4.x | Node.js Web 应用框架 |
| MySQL | 8.x | 关系型数据库 |
| JWT | - | 身份认证 |
| bcrypt | - | 密码加密 |

## 项目结构

```
权限控制/
├── express-basic-framework-main/    # 后端服务
│   ├── config/                      # 配置文件
│   ├── middlewares/                 # 中间件
│   │   ├── authAndPermission.js     # 权限认证中间件
│   │   └── errorCatch.js            # 错误捕获中间件
│   ├── router/                      # 路由
│   │   ├── user.js                  # 用户管理路由
│   │   ├── role.js                  # 角色管理路由
│   │   ├── permission.js            # 权限管理路由
│   │   └── menu.js                  # 菜单管理路由
│   ├── util/                        # 工具函数
│   ├── app.js                       # 应用入口
│   └── init.sql                     # 数据库初始化脚本
├── template-vue-main/               # 前端应用
│   ├── src/
│   │   ├── api/                     # API 请求封装
│   │   ├── components/              # 组件
│   │   ├── layouts/                 # 布局组件
│   │   ├── router/                  # 路由配置
│   │   ├── stores/                  # Pinia 状态管理
│   │   ├── utils/                   # 工具函数
│   │   ├── views/                   # 页面视图
│   │   │   ├── auth/                # 认证页面
│   │   │   ├── home/                # 首页
│   │   │   └── system/              # 系统管理
│   │   │       ├── user/            # 用户管理
│   │   │       ├── role/            # 角色管理
│   │   │       ├── permission/      # 权限管理
│   │   │       └── menu/            # 菜单管理
│   │   └── main.js                  # 应用入口
│   └── index.html                   # HTML 模板
└── images/                          # 项目截图
```

## 功能展示

### 首页
支持暗夜模式切换，提供直观的系统概览。

![首页-暗夜模式](images/首页-暗夜模式.png)

### 用户管理
管理系统用户，支持新增、编辑、删除和角色分配。

![用户管理界面](images/用户管理界面.png)

### 角色管理
管理系统角色，支持角色的增删改查。

![角色管理界面](images/角色管理界面.png)

### 权限管理
管理系统权限点，细粒度控制各功能模块的访问权限。

![权限管理界面](images/权限管理界面.png)

### 菜单管理
配置系统菜单结构，支持多级菜单和权限关联。

![菜单管理界面](images/菜单管理界面.png)

### 给用户分配角色
为用户分配一个或多个角色，实现角色继承权限。

![给用户分配角色的界面](images/给用户分配角色的界面.png)

### 给角色分配权限
为角色分配具体的权限点，控制角色可访问的功能。

![给角色分配权限的界面](images/给角色分配权限的界面.png)

### 给角色分配菜单
控制角色可见的菜单列表，实现菜单级别的权限控制。

![给角色分配菜单的界面](images/给角色分配菜单的界面.png)

## 核心功能

1. **用户管理** - 用户的增删改查、角色分配
2. **角色管理** - 角色的增删改查
3. **权限管理** - 权限点的管理和维护
4. **菜单管理** - 系统菜单的配置
5. **角色权限分配** - 为角色分配权限点
6. **角色菜单分配** - 为角色分配可见菜单
7. **用户角色分配** - 为用户分配角色
8. **动态路由** - 根据用户权限动态生成路由
9. **主题切换** - 支持明暗主题切换
10. **多标签页** - 支持多标签页浏览

## 安装运行

### 后端启动

```bash
cd express-basic-framework-main
npm install
npm start
```

### 前端启动

```bash
cd template-vue-main
npm install
npm run dev
```

### 数据库配置

1. 创建数据库并执行 `init.sql`
2. 修改 `config/default.json` 中的数据库配置

## 系统架构

```
┌─────────────────────────────────────────────────────────────┐
│                      前端 Layer                             │
│   Vue 3 + Element Plus + Pinia + Vue Router                │
├─────────────────────────────────────────────────────────────┤
│                      API Layer                              │
│   Express + RESTful API + JWT Auth                         │
├─────────────────────────────────────────────────────────────┤
│                      Data Layer                             │
│   MySQL 8.x + 权限控制数据模型                              │
└─────────────────────────────────────────────────────────────┘
```

## 权限模型

系统采用 RBAC（Role-Based Access Control）权限模型：

- **用户(User)** ↔ **角色(Role)**：多对多关系
- **角色(Role)** ↔ **权限(Permission)**：多对多关系
- **角色(Role)** ↔ **菜单(Menu)**：多对多关系

通过角色作为中间层，实现用户对权限和菜单的间接访问控制。