# vue3-rbac

**Repository Path**: code-html/vue3-rbac

## Basic Information

- **Project Name**: vue3-rbac
- **Description**: 一个基于 Vue 3 + TypeScript + Node.js 的现代化后台管理系统，实现了完整的 RBAC（基于角色的访问控制）权限模型。
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-03-19
- **Last Updated**: 2026-03-19

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# RBAC 后台管理系统

一个基于 Vue 3 + TypeScript + Node.js 的现代化后台管理系统，实现了完整的 RBAC（基于角色的访问控制）权限模型。

## 项目概述

本项目是一个前后端分离的后台管理系统，采用现代化的技术栈和设计理念，提供了完整的用户管理、角色管理、权限控制等功能。系统实现了双 token 机制，确保用户会话的安全性和持续性。

## 技术栈

### 前端
- **Vue 3** - 渐进式 JavaScript 框架
- **TypeScript** - JavaScript 的超集，提供类型安全
- **Vite** - 下一代前端构建工具
- **Vue Router** - Vue.js 官方路由管理器
- **Pinia** - Vue.js 状态管理库
- **Element Plus** - 基于 Vue 3 的组件库
- **Axios** - HTTP 客户端

### 后端
- **Node.js** - JavaScript 运行时环境
- **Express** - Web 应用框架
- **JWT** - JSON Web Token 认证
- **Bcryptjs** - 密码加密库
- **CORS** - 跨域资源共享

## 功能特性

### 核心功能
- ✅ 用户登录/登出
- ✅ 双 Token 机制（Access Token + Refresh Token）
- ✅ Token 自动刷新
- ✅ RBAC 权限模型
- ✅ 动态菜单权限
- ✅ 路由守卫

### 业务功能
- ✅ 仪表盘 - 数据统计展示
- ✅ 用户管理 - 用户的增删改查
- ✅ 角色管理 - 角色的增删改查
- ✅ 个人中心 - 个人信息管理

### 界面特性
- 🎨 现代化 UI 设计
- 📱 响应式布局
- 🌈 渐变背景和动画效果
- 🎯 统一的设计语言

## 项目结构

```
RBAC-WEB/
├── backend/                 # 后端项目
│   ├── routes/             # 路由文件
│   │   ├── auth.js        # 认证路由
│   │   └── protected.js   # 受保护的路由
│   ├── index.js           # 后端入口文件
│   ├── package.json       # 后端依赖配置
│   └── .env               # 环境变量配置
├── src/                    # 前端源代码
│   ├── api/               # API 接口
│   │   └── request.ts     # Axios 封装
│   ├── router/            # 路由配置
│   │   └── index.ts       # 路由定义
│   ├── store/             # 状态管理
│   │   └── user.ts        # 用户状态
│   ├── views/             # 页面组件
│   │   ├── Login.vue      # 登录页面
│   │   ├── Home.vue       # 首页框架
│   │   ├── Dashboard.vue  # 仪表盘
│   │   ├── User.vue       # 用户管理
│   │   ├── Role.vue       # 角色管理
│   │   ├── Profile.vue    # 个人中心
│   │   └── NotFound.vue   # 404 页面
│   ├── App.vue            # 根组件
│   ├── main.ts            # 前端入口文件
│   └── style.css          # 全局样式
├── package.json            # 前端依赖配置
└── README.md              # 项目说明文档
```

## 快速开始

### 环境要求
- Node.js >= 16.0.0
- npm >= 8.0.0

### 安装依赖

```bash
# 安装前端依赖
npm install

# 安装后端依赖
cd backend
npm install
```

### 配置环境变量

在 `backend/.env` 文件中配置以下环境变量：

```env
JWT_SECRET=your_jwt_secret_key
JWT_REFRESH_SECRET=your_jwt_refresh_secret_key
PORT=3000
```

### 启动项目

```bash
# 启动后端服务（在 backend 目录下）
cd backend
npm start

# 启动前端开发服务器（在项目根目录下）
cd ..
npm run dev
```

### 访问系统

- 前端地址：http://localhost:5174
- 后端地址：http://localhost:3000

## 测试账号

### 管理员账号
- 用户名：`admin`
- 密码：`admin123`
- 权限：所有菜单（仪表盘、用户管理、角色管理、个人中心）

### 普通用户账号
- 用户名：`user`
- 密码：`user123`
- 权限：部分菜单（仪表盘、个人中心）

## 双 Token 机制

系统采用双 Token 机制来保证用户会话的安全性和持续性：

### Access Token
- 有效期：10 秒
- 用途：API 请求认证
- 存储：localStorage

### Refresh Token
- 有效期：25 秒
- 用途：刷新 Access Token
- 存储：localStorage

### 工作流程
1. 用户登录成功后，获得 Access Token 和 Refresh Token
2. 前端使用 Access Token 进行 API 请求
3. 当 Access Token 过期（401 错误），前端自动使用 Refresh Token 获取新的 Access Token
4. 如果 Refresh Token 也过期，用户需要重新登录

## RBAC 权限模型

系统实现了基于角色的访问控制（RBAC）模型：

### 角色定义
- **admin** - 管理员角色，拥有所有权限
- **user** - 普通用户角色，拥有部分权限

### 权限控制
1. **菜单权限**：根据用户角色动态显示菜单
2. **路由权限**：通过路由守卫控制页面访问
3. **API 权限**：后端验证用户角色和权限

### 权限配置
```javascript
// 菜单配置
const menus = {
  admin: [
    { path: '/home/dashboard', title: '仪表盘', icon: 'DataLine' },
    { path: '/home/user', title: '用户管理', icon: 'User' },
    { path: '/home/role', title: '角色管理', icon: 'Avatar' },
    { path: '/home/profile', title: '个人中心', icon: 'UserFilled' }
  ],
  user: [
    { path: '/home/dashboard', title: '仪表盘', icon: 'DataLine' },
    { path: '/home/profile', title: '个人中心', icon: 'UserFilled' }
  ]
}
```

## API 接口文档

### 认证接口

#### 登录
- **URL**: `POST /api/login`
- **请求体**:
  ```json
  {
    "username": "admin",
    "password": "admin123"
  }
  ```
- **响应**:
  ```json
  {
    "success": true,
    "accessToken": "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...",
    "refreshToken": "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...",
    "user": {
      "id": 1,
      "username": "admin",
      "role": "admin"
    },
    "menuList": [...]
  }
  ```

#### 刷新 Token
- **URL**: `POST /api/refresh-token`
- **请求体**:
  ```json
  {
    "refreshToken": "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9..."
  }
  ```
- **响应**:
  ```json
  {
    "accessToken": "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9..."
  }
  ```

#### 退出登录
- **URL**: `POST /api/logout`
- **响应**:
  ```json
  {
    "message": "退出登录成功"
  }
  ```

### 业务接口

#### 仪表盘数据
- **URL**: `GET /api/dashboard`
- **需要认证**: 是
- **响应**: 统计数据和最近活动列表

#### 用户管理
- **URL**: `GET /api/users` - 获取用户列表
- **URL**: `POST /api/users` - 添加用户
- **URL**: `PUT /api/users/:id` - 更新用户
- **URL**: `DELETE /api/users/:id` - 删除用户
- **需要认证**: 是
- **需要角色**: admin

#### 角色管理
- **URL**: `GET /api/roles` - 获取角色列表
- **URL**: `POST /api/roles` - 添加角色
- **URL**: `PUT /api/roles/:id` - 更新角色
- **URL**: `DELETE /api/roles/:id` - 删除角色
- **需要认证**: 是
- **需要角色**: admin

#### 个人中心
- **URL**: `GET /api/profile` - 获取个人信息
- **URL**: `PUT /api/profile` - 更新个人信息
- **需要认证**: 是

## 开发指南

### 前端开发
```bash
# 启动开发服务器
npm run dev

# 构建生产版本
npm run build

# 预览生产版本
npm run preview
```

### 后端开发
```bash
# 启动后端服务
cd backend
npm start
```

### 代码规范
- 使用 TypeScript 进行类型检查
- 遵循 Vue 3 组合式 API 风格
- 使用 ESLint 进行代码检查

## 浏览器支持

- Chrome >= 87
- Firefox >= 78
- Safari >= 14
- Edge >= 88

## 许可证

MIT License

## 联系方式

如有问题或建议，请提交 Issue 或 Pull Request。

---

**注意**：本项目仅供学习和演示使用，不建议直接用于生产环境。在生产环境中使用时，请确保：
1. 修改默认的 JWT 密钥
2. 使用 HTTPS 协议
3. 添加更完善的错误处理和日志记录
4. 使用数据库存储用户数据
5. 实现