# vue3后台模版

**Repository Path**: lx0327/vue3_js_pinia

## Basic Information

- **Project Name**: vue3后台模版
- **Description**: vue3+js_pinia后台模版
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2023-05-26
- **Last Updated**: 2025-05-23

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# Vue3 后台管理系统

## 权限管理系统说明

系统采用了基于RBAC（Role-Based Access Control）的权限管理模型，主要包含以下几个核心概念：

### 1. 权限资源
系统中的权限资源分为两种类型：
- **菜单权限**：控制用户可以访问哪些菜单页面
- **按钮权限**：控制用户在特定页面可以执行哪些操作（如：新增、编辑、删除等）

### 2. 角色
角色是权限的集合，系统预设了两种基本角色：
- **管理员**：拥有系统所有权限
- **普通用户**：仅拥有基本权限

### 3. 用户
用户通过分配角色获得相应的权限。

### 权限管理操作流程

1. **菜单管理**：
   - 系统管理员可以在菜单管理中添加/编辑菜单和按钮权限
   - 菜单类型可选择"菜单"或"按钮"
   - 每个权限资源都有唯一的权限标识（如：system:user:add）

2. **角色管理**：
   - 系统管理员在角色管理中创建不同角色
   - 通过"分配权限"功能为角色分配菜单和按钮权限
   - 权限以树形结构展示，支持按菜单分层选择

3. **用户管理**：
   - 为用户分配一个或多个角色
   - 用户将获得所有被分配角色的权限

### 前端权限控制
前端通过两种方式控制权限：

1. **菜单显示控制**：
   - 根据用户拥有的菜单权限动态生成导航菜单

2. **按钮显示控制**：
   - 使用`v-permission`指令控制按钮的显示与隐藏
   - 示例：`<button v-permission="'system:user:add'">添加用户</button>`

### 后端权限控制
后端通过中间件进行权限检查：

```javascript
// 需要'system:user:add'权限才能添加用户
router.post('/addUser', verifyToken, checkRolePermission('system:user:add'), async (req, res) => {
  // 处理添加用户的逻辑
});
```

### 权限标识规范
权限标识采用三段式命名：`模块:资源:操作`，例如：
- system:user:view - 查看用户
- system:user:add - 添加用户
- system:user:edit - 编辑用户
- system:user:delete - 删除用户

## 技术栈

- 前端：Vue 3 + Vite + Ant Design Vue
- 后端：Node.js + Express + MySQL