# rbac_base_wx

**Repository Path**: osvue/rbac_base_wx

## Basic Information

- **Project Name**: rbac_base_wx
- **Description**: 基于rbac 
- **Primary Language**: JavaScript
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-06-25
- **Last Updated**: 2025-08-13

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

## rbac

基于Vue3+Spring Boot的现代化RBAC权限管理平台

## 项目概述

极光管理系统是采用前后端分离架构设计的现代化企业级后台解决方案，集成动态路由、细粒度权限控制和日志审计等核心功能，支持快速业务系统搭建。

## 技术架构

### 前端技术栈

- **核心框架**：Vue3 + Composition API
- **状态管理**：Pinia（支持TypeScript）
- **路由方案**：Vue Router 4（动态路由加载）
- **UI组件库**：Element Plus（按需加载）
- **构建工具**：Vite（支持HMR）
- **网络请求**：Axios（拦截器封装）
- **工具库**：lodash-es、dayjs

### 后端技术栈

- **基础框架**：Spring Boot 3.x
- **ORM框架**：MyBatis-Plus
- **安全框架**：Spring Security
- **日志切面**：自定义注解+AOP
- **数据库**：MySQL 8.0
- **缓存**：Redis
- **API文档**：Swagger/Knife4j

## 核心功能模块

### 1. 动态路由系统

- 基于用户角色的实时路由加载
- 路由元信息动态配置（权限标识、缓存策略等）
- 404路由自动兜底处理

### 2. RBAC权限模型

- 经典五表设计（用户/角色/菜单/权限/关联表）
- 权限粒度控制到按钮级别
- 动态菜单生成（支持多级嵌套）

### 3. 日志管理系统

- 操作日志AOP切面记录
- 登录日志轨迹追踪
- 日志存储与快速检索

### 4. 系统特色功能

- 多环境配置管理（dev/test/prod）
- 接口版本控制
- 统一响应封装
- 全局异常处理

## 项目结构

```
├── frontend/                 # 前端项目
│   ├── src/
│   │   ├── api/              # 接口封装
│   │   ├── assets/           # 静态资源
│   │   ├── components/       # 公共组件
│   │   ├── layout/           # 布局组件
│   │   ├── router/           # 动态路由配置
│   │   ├── stores/           # Pinia状态管理
│   │   ├── utils/            # 工具函数
│   │   └── views/            # 页面组件
│   └── package.json
└── backend/                  # 后端项目
    ├── src/main/java/
    │   ├── config/           # 配置类
    │   ├── controller/       # 控制器
    │   ├── entity/           # 实体类
    │   ├── aspect/           # 切面类
    │   ├── mapper/           # MyBatis接口
    │   ├── service/          # 业务逻辑
    │   ├── dto/              # 数据传输对象
    │   └── security/         # 安全配置
    └── pom.xml
```

## 部署指南

### 前端部署

```bash
# 安装依赖
npm install

# 开发环境启动
npm run dev

# 生产环境构建
npm run build

# 构建产物位于 dist/ 目录
```

### 后端部署

```bash
# 打包应用
mvn clean package -DskipTests

# 运行Jar包
java -jar target/jiguang-system-1.0.0.jar

# 生产环境推荐配置
java -Xms512m -Xmx1024m -jar target/jiguang-system-1.0.0.jar --spring.profiles.active=prod
```
### Dockerfile

```sh
# =================前端构建阶段=================
FROM node:18-alpine AS frontend-builder

# 设置工作目录
WORKDIR /app

# 复制前端依赖配置文件
COPY frontend/package.json frontend/package-lock.json* ./

# 安装依赖（利用npm缓存层）
RUN npm ci --registry=https://registry.npmmirror.com

# 复制前端源码
COPY frontend/ .

# 构建生产环境产物
RUN npm run build

# =================后端构建阶段=================
FROM maven:3.9-eclipse-temurin-17 AS backend-builder

# 设置工作目录
WORKDIR /app

# 复制后端依赖配置文件
COPY backend/pom.xml .

# 下载依赖（利用Maven缓存层）
RUN mvn dependency:go-offline -B

# 复制后端源码
COPY backend/ .

# 构建生产环境Jar包
RUN mvn clean package -DskipTests

# =================运行阶段=================
FROM eclipse-temurin:17-jre-alpine

# 设置时区（亚洲/上海）
RUN ln -sf /usr/share/zoneinfo/Asia/Shanghai /etc/localtime \
    && echo "Asia/Shanghai" > /etc/timezone

# 创建应用目录
WORKDIR /app

# 从构建阶段复制产物
COPY --from=frontend-builder /app/dist /app/frontend
COPY --from=backend-builder /app/target/jiguang-system-*.jar /app/backend.jar

# 暴露端口（前后端共用80端口）
EXPOSE 80

# 健康检查（检测Spring Boot Actuator端点）
HEALTHCHECK --interval=30s --timeout=3s \
    CMD curl -f http://localhost:8080/actuator/health || exit 1

# 启动脚本（需提前创建）
COPY docker-entrypoint.sh /usr/local/bin/
RUN chmod +x /usr/local/bin/docker-entrypoint.sh

# 启动服务
ENTRYPOINT ["docker-entrypoint.sh"]
```
## 数据库初始化

1. 执行`backend/sql/schema.sql`创建基础表结构
2. 执行`backend/sql/data.sql`初始化基础数据（管理员账号等）

## 版本说明

### v1.0.0 - 最终发布版

- ✅ 完整实现RBAC五表权限模型
- ✅ 动态路由与菜单联动
- ✅ 前后端分离架构
- ✅ 完善的日志审计功能
- ✅ 生产环境优化配置

## 开发规范

1. 前端代码风格：ESLint + Prettier
2. Git提交规范：遵循Angular Commit Message Format
3. API设计规范：RESTful + 统一响应格式
4. 数据库规范：字段命名下划线风格

## 常见问题

Q: 动态路由加载失败怎么办？
A: 检查后端返回的菜单数据格式是否符合约定，前端控制台查看网络请求状态

Q: 权限不生效？
A: 清除浏览器缓存，确认用户角色对应的权限配置是否正确

Q: 如何扩展新的权限类型？
A: 在权限表中添加新记录，并在前端路由meta中配置对应的permission标识

## 技术支持

- hanzq@aircas.ac.cn

---

我来分析您的前后端配置，并提供前端构建后部署到 Nginx 的配置方案。

## 当前配置分析

### 前端配置 (Vite)
- **开发端口**: 5888
- **API 代理**: `/api` → `http://localhost:8111/rbac`
- **基础路径**: `/api`

### 后端配置 (Spring Boot)
- **服务端口**: 8111
- **上下文路径**: `/rbac`
- **应用名称**: `app`

### 前端请求配置
- **baseURL**: `/api`
- **超时时间**: 15秒

## 前端构建配置

首先需要修改 `vite.config.js` 以支持生产环境部署：

## 前端构建命令

现在您可以使用以下命令构建前端项目：

```bash
# 进入前端项目目录
cd rbac-admin

# 安装依赖（如果还没安装）
npm install

# 构建生产版本
npm run build
```

构建完成后，会在 `rbac-admin/dist` 目录生成静态文件。

## Nginx 配置方案

### 方案一：前后端分离部署（推荐）

创建 Nginx 配置文件 `nginx.conf`：

```nginx
server {
    listen 80;
    server_name your-domain.com;  # 替换为您的域名
    
    # 前端静态文件
    location /rbac-admin/ {
        alias /path/to/rbac-admin/dist/;  # 替换为实际的前端构建文件路径
        index index.html;
        try_files $uri $uri/ /rbac-admin/index.html;
        
        # 静态资源缓存
        location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg|woff|woff2|ttf|eot)$ {
            expires 1y;
            add_header Cache-Control "public, immutable";
        }
    }
    
    # 后端 API 代理
    location /rbac/ {
        proxy_pass http://localhost:8111;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
        
        # 超时配置
        proxy_connect_timeout 60s;
        proxy_send_timeout 60s;
        proxy_read_timeout 60s;
        
        # 文件上传大小限制
        client_max_body_size 100M;
    }
    
    # 重定向根路径到前端
    location = / {
        return 301 /rbac-admin/;
    }
}
```

### 方案二：同域名部署

```nginx
server {
    listen 80;
    server_name your-domain.com;
    
    # 前端静态文件
    location / {
        root /path/to/rbac-admin/dist;
        index index.html;
        try_files $uri $uri/ /index.html;
        
        # 静态资源缓存
        location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg|woff|woff2|ttf|eot)$ {
            expires 1y;
            add_header Cache-Control "public, immutable";
        }
    }
    
    # 后端 API 代理
    location /rbac/ {
        proxy_pass http://localhost:8111;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
        
        # 超时配置
        proxy_connect_timeout 60s;
        proxy_send_timeout 60s;
        proxy_read_timeout 60s;
        
        # 文件上传大小限制
        client_max_body_size 100M;
    }
}
```

## 部署步骤

### 1. 构建前端项目
```bash
cd rbac-admin
npm run build
```

### 2. 部署前端文件
```bash
# 将构建文件复制到 Nginx 目录
sudo cp -r dist/* /var/www/html/rbac-admin/
```

### 3. 配置 Nginx
```bash
# 创建 Nginx 配置文件
sudo nano /etc/nginx/sites-available/rbac-app

# 启用站点
sudo ln -s /etc/nginx/sites-available/rbac-app /etc/nginx/sites-enabled/

# 测试配置
sudo nginx -t

# 重启 Nginx
sudo systemctl restart nginx
```

### 4. 启动后端服务
```bash
cd javaApi
java -jar target/app-0.0.1-SNAPSHOT.jar
```

## 修改前端请求配置

如果需要支持生产环境的 API 地址，可以修改 `request.js`：

## 完整的部署流程

### 1. 前端构建
```bash
cd rbac-admin
npm install
npm run build
```

### 2. 后端打包
```bash
cd javaApi
mvn clean package -DskipTests
```

### 3. 部署文件结构
```
/var/www/html/
├── rbac-admin/          # 前端静态文件
│   ├── index.html
│   ├── assets/
│   └── ...
└── nginx/
    └── conf.d/
        └── rbac-app.conf
```

### 4. 启动服务
```bash
# 启动后端
java -jar javaApi/target/app-0.0.1-SNAPSHOT.jar

# 重启 Nginx
sudo systemctl restart nginx
```

## 访问地址

- **前端**: `http://your-domain.com/rbac-admin/`
- **后端 API**: `http://your-domain.com/rbac/`
- **Swagger 文档**: `http://your-domain.com/rbac/swagger-ui.html`

## 注意事项

1. **路径配置**: 确保前端的基础路径与 Nginx 配置一致
2. **API 代理**: 生产环境不需要 Vite 的代理配置，由 Nginx 处理
3. **文件权限**: 确保 Nginx 有权限访问前端文件
4. **SSL 证书**: 生产环境建议配置 HTTPS
5. **防火墙**: 确保服务器防火墙开放相应端口 

## 1. Hash 模式 vs History 模式

### Hash 模式（默认）
```javascript
// 不指定 base 或 base 为空
createWebHashHistory()  // 或 createWebHashHistory('')
```
**URL 格式：** `http://example.com/#/path`
**特点：** Hash 后面的内容不会发送到服务器

### Hash 模式 + Base 路径
```javascript
// 指定 base 路径
createWebHashHistory('/rbac-admin/')
```
**URL 格式：** `http://example.com/rbac-admin/#/path`

## 2. Base 参数对 Nginx 的影响

### 场景1：不指定 base（默认）
```javascript
// router/index.js
import { createWebHashHistory } from 'vue-router'

export default createRouter({
  history: createWebHashHistory(),
  routes: [...]
})
```

**访问路径：**
- `http://your-domain.com/#/login`
- `http://your-domain.com/#/system/user`
- `http://your-domain.com/#/dashboard`

**Nginx 配置：**
```nginx
server {
    listen 80;
    server_name your-domain.com;
    
    # 前端静态文件
    location / {
        root /var/www/html/rbac-admin/dist;
        index index.html;
        # Hash 模式不需要 try_files，因为 # 后面的内容不会发送到服务器
    }
    
    # 后端 API 代理
    location /rbac/ {
        proxy_pass http://localhost:8111;
        # ... 其他配置
    }
}
```

### 场景2：指定 base 为 `/rbac-admin/`
```javascript
// router/index.js
import { createWebHashHistory } from 'vue-router'

export default createRouter({
  history: createWebHashHistory('/rbac-admin/'),
  routes: [...]
})
```

**访问路径：**
- `http://your-domain.com/rbac-admin/#/login`
- `http://your-domain.com/rbac-admin/#/system/user`
- `http://your-domain.com/rbac-admin/#/dashboard`

**Nginx 配置：**
```nginx
server {
    listen 80;
    server_name your-domain.com;
    
    # 前端静态文件 - 需要匹配 base 路径
    location /rbac-admin/ {
        alias /var/www/html/rbac-admin/dist/;
        index index.html;
        # Hash 模式仍然不需要 try_files
    }
    
    # 后端 API 代理
    location /rbac/ {
        proxy_pass http://localhost:8111;
        # ... 其他配置
    }
    
    # 根路径重定向
    location = / {
        return 301 /rbac-admin/;
    }
}
```

## 3. 关键差异对比

| 配置 | URL 格式 | Nginx location | 是否需要 try_files | 静态资源路径 |
|------|----------|----------------|-------------------|-------------|
| `createWebHashHistory()` | `/#/path` | `location /` | ❌ 不需要 | `/assets/xxx.js` |
| `createWebHashHistory('/rbac-admin/')` | `/rbac-admin/#/path` | `location /rbac-admin/` | ❌ 不需要 | `/rbac-admin/assets/xxx.js` |

## 4. 静态资源路径影响

### 不指定 base
```javascript
createWebHashHistory()
```
**静态资源请求：**
- `http://your-domain.com/assets/index.js`
- `http://your-domain.com/assets/style.css`

### 指定 base
```javascript
createWebHashHistory('/rbac-admin/')
```
**静态资源请求：**
- `http://your-domain.com/rbac-admin/assets/index.js`
- `http://your-domain.com/rbac-admin/assets/style.css`

## 5. Vite 配置对应关系

### 不指定 base
```javascript
// vite.config.js
export default defineConfig({
  base: '/',  // 默认值
  // ...
})
```

### 指定 base
```javascript
// vite.config.js
export default defineConfig({
  base: '/rbac-admin/',
  // ...
})
```

## 6. 实际配置建议

### 推荐配置
```javascript
// router/index.js
import { createWebHashHistory } from 'vue-router'

export default createRouter({
  history: createWebHashHistory('/rbac-admin/'),
  routes: [...]
})
```

```javascript
// vite.config.js
export default defineConfig({
  base: '/rbac-admin/',
  // ...
})
```

```nginx
# nginx.conf
server {
    listen 80;
    server_name your-domain.com;
    
    # 前端静态文件
    location /rbac-admin/ {
        alias /var/www/html/rbac-admin/dist/;
        index index.html;
    }
    
    # 后端 API 代理
    location /rbac/ {
        proxy_pass http://localhost:8111;
        # ... 其他配置
    }
    
    # 根路径重定向
    location = / {
        return 301 /rbac-admin/;
    }
}
```

## 7. 优势分析

### Hash 模式的优势
1. **服务器配置简单**：不需要 `try_files` 配置
2. **兼容性好**：所有浏览器都支持
3. **部署简单**：不需要服务器端路由支持

### 指定 base 的优势
1. **路径清晰**：明确区分前端应用路径
2. **多应用部署**：同一域名下可以部署多个应用
3. **反向代理友好**：便于 Nginx 配置

## 总结

`createWebHashHistory(base)` 中的 `base` 参数主要影响：
1. **访问路径格式**：决定 URL 的前缀
2. **Nginx location 配置**：需要匹配 base 路径
3. **静态资源路径**：所有资源请求都会带上 base 前缀
4. **部署结构**：影响文件部署的目录结构