我用 NestJS + Vue3 + Prisma + PostgreSQL 打造了企業級 SaaS 多租戶平台

🎯 我用 NestJS + Vue3 + Prisma + PostgreSQL 打造了企業級 SaaS 多租戶平台

一個生產級的全端管理系統開源專案，從零到一的實戰分享

前言

這是一個基於 NestJS + Vue3 + Prisma + PostgreSQL 構建的全端管理系統，不是簡單的 CRUD，而是一個生產級別的解決方案。它包含了多租戶架構、RBAC 權限管理、請求加密、完整的日誌監控等企業級特性。

🔗 專案連結

🌟 GitHub 開源地址：github.com/linlingqin7…
🎮 線上體驗地址：www.linlingqin.top/
📖 專案文檔地址：專案文檔

體驗帳號：demo / demo123 (租戶 000000)
完整權限帳號：admin / admin123 (租戶 000000)

📱 先看效果

登入頁面

支持帳號密碼登入、驗證碼驗證、記住密碼

首頁儀表板

系統概覽、快捷入口、數據統計、圖表展示

使用者管理

使用者列表、角色分配、部門選擇、狀態管理

角色管理

角色權限配置、菜單權限樹、數據權限範圍

• ✨ 現代化的介面設計，支持深色模式
• 📱 響應式佈局，完美適配各種螢幕
• 🎨 豐富的組件和互動效果

完整功能截圖

菜單管理

菜單樹形結構、路由配置、圖標選擇、權限標識

部門管理

組織架構樹、部門人員、數據權限

崗位管理

崗位配置、崗位排序、狀態管理

字典管理

數據字典維護、字典項配置

參數配置

系統參數、動態配置、參數分類

通知公告

公告發布、通知管理、類型分類

租戶管理

多租戶列表、套餐配置、租戶狀態

定時任務

Cron 任務配置、執行日誌、任務管理

系統監控

伺服器狀態、CPU/記憶體使用率、磁碟信息

快取監控

Redis 快取信息、命令統計、鍵值管理

在線使用者

即時在線使用者、會話管理、強制下線

操作日誌

操作記錄、請求參數、響應結果、異常捕獲

登入日誌

登入歷史、IP 地址、瀏覽器信息、登入狀態

快取列表

快取鍵管理、過期時間、快取清理

主題配置

多主題切換、深色模式、主題色配置、佈局模式

✨ 核心特性

🏢 多租戶 SaaS 架構

這是本專案的一大亮點。實現了完整的租戶數據隔離：

// 所有資料庫查詢自動按租戶過濾
const users = await prisma.sysUser.findMany({
  where: { name: 'John' }
  // tenantId 會自動注入，無需手動添加
});

// 跳過租戶過濾（特殊場景）
@IgnoreTenant()
async getAllTenants() {
  return await this.prisma.tenant.findMany();
}

技術實現：

• 基於 Prisma 擴展實現透明的租戶過濾
• 通過 TenantGuard 從請求頭自動識別租戶
• 超級管理員（租戶 000000）可跨租戶管理

適用場景：

• SaaS 平台
• 企業內部多部門系統
• 白標產品

🔐 RBAC 權限管理

不只是簡單的角色權限，而是多層級、細粒度的權限控制：

@Controller('users')
export class UserController {
  // 需要特定權限才能訪問
  @RequirePermission('system:user:add')
  @Post()
  create(@Body() dto: CreateUserDto) {
    return this.userService.create(dto);
  }

  // 需要特定角色
  @RequireRole('admin')
  @Delete(':id')
  remove(@Param('id') id: string) {
    return this.userService.remove(id);
  }
}

權限層級：

1. 菜單級別：控制菜單顯示/隱藏
2. 按鈕級別：控制頁面內按鈕權限
3. 數據級別：全部/本部門/僅本人等數據範圍

前端權限控制：

<template>
  <!-- 按鈕級權限 -->
  <n-button v-if="hasPermission('system:user:add')">
    添加使用者
  </n-button>
</template>

🔒 請求加密機制

敏感資料傳輸採用 AES + RSA 混合加密：

加密流程：

1. 前端生成隨機 AES 密鑰
2. 用 AES-CBC 加密請求資料
3. 用伺服器 RSA 公鑰加密 AES 密鑰
4. 發送 {encryptedKey, encryptedData} + header x-encrypted: true

// 後端自動解密
@Post('login')
async login(@Body() dto: LoginDto) {
  // dto 已自動解密，直接使用
  return this.authService.login(dto);
}

// 跳過解密（非敏感介面）
@SkipDecrypt()
@Get('captcha')
async getCaptcha() {
  return this.captchaService.generate();
}

優勢：

• 保護密碼、Token 等敏感信息
• 防止中間人攻擊
• 對業務代碼透明，由攔截器統一處理

📊 完善的日誌監控

基於 Pino 實現的高性能結構化日誌：

// 自動記錄操作日誌
@Operlog({
  businessType: BusinessTypeEnum.UPDATE,
  title: '修改使用者'
})
@Put(':id')
async update(@Param('id') id: string, @Body() dto: UpdateUserDto) {
  return this.userService.update(id, dto);
}

監控能力：

• 結構化日誌：自動記錄 requestId、tenantId、username
• 敏感字段脫敏：password、token 等自動隱藏
• 操作審計：記錄誰在什麼時間做了什麼
• 登入日誌：登入歷史、IP、瀏覽器等信息
• 健康檢查：K8s liveness/readiness 探針
• Prometheus 指標：暴露 /api/metrics 端點

日誌輸出示例：

{
  "level": "info",
  "time": "2025-12-22T10:30:00.000Z",
  "requestId": "a1b2c3d4",
  "tenantId": "000001",
  "username": "admin",
  "method": "POST",
  "url": "/api/system/user",
  "statusCode": 200,
  "duration": 45
}

🎭 演示帳戶系統

專為產品演示設計的只讀帳戶機制：

// Demo 帳戶攔截器
@UseInterceptors(DemoInterceptor)
@Controller('users')
export class UserController {
  @Post()  // Demo 帳戶會被自動攔截
  create(@Body() dto: CreateUserDto) {
    return this.userService.create(dto);
  }

  @Get()  // 查詢操作不受影響
  findAll() {
    return this.userService.findAll();
  }
}

特性：

• 52 個只讀權限，可查看所有模組
• 自動攔截所有寫操作（POST/PUT/DELETE/PATCH）
• 返回友好的提示信息
• 適合演示站點、產品 Demo

🌐 國際化支持

前後端完整的 i18n 方案：

// 後端
throw new ApiException(ErrorEnum.USER_NOT_FOUND);
// 自動返回對應語言的錯誤信息

// 前端
const { t } = useI18n();
console.log(t('system.user.name')); // 根據語言返回對應文本

支持中文、英文，可輕鬆擴展其他語言。

🛠️ 技術棧詳解

後端技術棧

前端技術棧

🏗️ 系統架構詳解

📐 整體架構圖

                        ┌─────────────────────────────────┐
                        │      使用者/客戶端層              │
                        │  ┌──────────┐  ┌─────────────┐ │
                        │  │  瀏覽器   │  │  行動端App  │ │
                        │  └──────────┘  └─────────────┘ │
                        └──────────────┬──────────────────┘
                                       │ HTTPS
                        ┌──────────────▼──────────────────┐
                        │      CDN / Nginx 網關            │
                        │  • 靜態資源快取                  │
                        │  • 反向代理                      │
                        │  • 負載均衡                      │
                        │  • SSL 證書                      │
                        └──────────────┬──────────────────┘
                                       │
                ┌──────────────────────┴──────────────────────┐
                │                                              │
┌───────────────▼────────────────┐       ┌───────────────────▼──────────┐
│        前端應用 (Vue3)          │       │     後端應用 (NestJS)         │
│                                 │       │                               │
│  ┌──────────────────────────┐  │       │  ┌────────────────────────┐  │
│  │     UI 層 (Naive UI)     │  │       │  │   控制器層 (Controllers)│  │
│  │  • 組件庫                │  │       │  │   • 路由定義           │  │
│  │  • 主題定製              │  │       │  │   • 請求驗證           │  │
│  │  • 響應式佈局            │  │       │  │   • 參數轉換           │  │
│  └──────────────────────────┘  │       │  └────────────────────────┘  │
│                                 │       │              │                │
│  ┌──────────────────────────┐  │       │  ┌───────────▼─────────────┐ │
│  │   狀態層 (Pinia Store)   │  │       │  │   守衛層 (Guards)       │ │
│  │  • 全局狀態              │  │       │  │   1. TenantGuard       │ │
│  │  • 使用者信息            │  │       │  │   2. AuthGuard         │ │
│  │  • 權限數據              │  │       │  │   3. RolesGuard        │ │
│  └──────────────────────────┘  │       │  │   4. PermissionGuard   │ │
│                                 │       │  └───────────┬─────────────┘ │
│  ┌──────────────────────────┐  │       │              │                │
│  │   路由層 (Vue Router)    │  │       │  ┌───────────▼─────────────┐ │
│  │  • 動態路由              │  │       │  │  攔截器層 (Interceptors)│ │
│  │  • 路由守衛              │  │       │  │  1. DecryptInterceptor │ │
│  │  • 懶加載                │  │       │  │  2. DemoInterceptor    │ │
│  └──────────────────────────┘  │       │  │  3. TransformInter...  │ │
│                                 │       │  │  4. LoggingInterceptor │ │
│  ┌──────────────────────────┐  │       │  └───────────┬─────────────┘ │
│  │   請求層 (Axios)         │  │       │              │                │
│  │  • 請求攔截              │◄─┼───────┼──────────────┤                │
│  │  • 響應攔截              │  │       │  ┌───────────▼─────────────┐ │
│  │  • 錯誤處理              │  │       │  │   业务層 (Services)     │ │
│  │  • 請求加密              │  │       │  │  • 系統管理 Service     │ │
│  └──────────────────────────┘  │       │  │  • 權限管理 Service     │ │
│                                 │       │  │  • 監控管理 Service     │ │
└─────────────────────────────────┘       │  │  • 租戶管理 Service     │ │
                                          │  └───────────┬─────────────┘ │
                                          │              │                │
                                          │  ┌───────────▼─────────────┐ │
                                          │  │   資料訪問層 (Prisma)   │ │
                                          │  │  • Schema 定義          │ │
                                          │  │  • 類型生成             │ │
                                          │  │  • 查詢構建器           │ │
                                          │  │  • 租戶擴展             │ │
                                          │  └───────────┬─────────────┘ │
                                          └──────────────┼────────────────┘
                                                         │
                        ┌────────────────────────────────┼────────────────┐
                        │                                │                │
            ┌───────────▼──────────┐         ┌──────────▼──────────┐     │
            │  PostgreSQL 資料庫    │         │   Redis 快取        │     │
            │  • 主資料儲存         │         │   • 會話儲存        │     │
            │  • 事務支持           │         │   • 資料快取        │     │
            │  • 索引優化           │         │   • 分佈式鎖        │     │
            └───────────────────────┘         └─────────────────────┘     │
                                                                           │
            ┌──────────────────────────────────────────────────────────┐  │
            │                   外部服務集成                            │  │
            │  ┌─────────────┐  ┌──────────────┐  ┌────────────────┐  │  │
            │  │  OSS 對象儲存│  │  郵件服務    │  │  短信服務      │  │  │
            │  │  • 阿里雲    │  │  • SMTP      │  │  • 阿里雲      │  │  │
            │  │  • 七牛雲    │  │  • SendGrid  │  │  • 騰訊雲      │  │  │
            │  │  • MinIO     │  └──────────────┘  └────────────────┘  │  │
            │  └─────────────┘                                          │  │
            │  ┌──────────────────────────────────────────────────────┐│  │
            │  │           監控與日誌                                  ││  │
            │  │  • Prometheus (指標採集)                              ││  │
            │  │  • Grafana (可視化)                                   ││  │
            │  │  • Pino Logger (日誌)                                 ││  │
            │  │  • Terminus (健康檢查)                                ││  │
            │  └──────────────────────────────────────────────────────┘│  │
            └──────────────────────────────────────────────────────────┘  │
                                                                           │
                        ┌──────────────────────────────────────────────────┘
                        │        部署環境 (可選)
                        │  ┌──────────────────────────────┐
                        │  │      Docker 容器化            │
                        │  │  • 應用容器                   │
                        │  │  • 資料庫容器                 │
                        │  │  • Redis 容器                 │
                        │  └──────────────────────────────┘
                        │  ┌──────────────────────────────┐
                        │  │   Kubernetes 編排             │
                        │  │  • Pod 管理                   │
                        │  │  • Service 暴露               │

---

原文出處：https://juejin.cn/post/7586663700901298185