## ☘️ 前言

Hello，感觉已经很久没有认真写文章了。自从 AI 热潮席卷技术圈之后，传统的技术路线文章似乎渐渐失去了原本的参考意义。

这次项目的开发初衷，其实是对 `Better Auth` 很感兴趣，想借助一个全新项目来系统学习它。在技术选型阶段，我在 `Next.js` 和 `Nuxt.js` 之间犹豫了一下。不过考虑到自己之前已经用 `Next.js` 做过不少项目，比较熟悉，而且工作中也主要使用 `React` 相关技术栈，所以这次决定尝试点不一样的，最终选择了 `Nuxt.js`。

原本的计划只是实现一个基础的鉴权模块，包括登录、注册这些核心功能。但随着开发的推进，又觉得动态菜单和权限配置也应该一并加上，于是功能越做越多，不知不觉就发展成了现在这个规模。如果大家有兴趣，欢迎去看看，也欢迎交流讨论。

## 📚 项目简介

[Better Nuxt](https://github.com/baiwumm/better-nuxt) 是一个现代化的全栈后台管理系统，前端基于 `Nuxt.js` 和 `Nuxt UI` 构建，后端采用 `Better-Auth` 认证框架与 `Drizzle ORM` 配合 `PostgreSQL` 数据库实现。

本项目集成了当前流行的前后端技术栈，是学习全栈开发和现代认证授权的理想参考项目。

![](https://developer.qcloudimg.com/http-save/yehe-8241798/5a3e0c9e509a4b908480bab0bcaee46f.webp)

## ✨ 特性

### 🚀 **现代化全栈架构**

-   **前沿技术**：深度整合 `Nuxt 3`、`Better-Auth`、`Nuxt UI`、`Drizzle` 与 `PostgreSQL`，紧跟现代 `Web` 技术趋势。
    
-   **极致性能**：`SSR/SSG` 混合渲染、高效数据库查询优化，兼顾 SEO 与用户体验。
    
-   **安全可靠**：内置完备认证体系，结合强类型定义，从源头降低运行时错误。
    

### 🔐 **开箱即用的认证系统**

集成 Better-auth，支持多策略身份验证、会话管理与权限控制，为应用提供安全可靠的用户体系

![](https://developer.qcloudimg.com/http-save/yehe-8241798/5b48f155963fd915a21d56c220fed13d.webp)

![](https://developer.qcloudimg.com/http-save/yehe-8241798/986be9a9347d6850ffc41145a21fef20.webp)

![](https://developer.qcloudimg.com/http-save/yehe-8241798/ef01b98539ce7bc5eed15b953db433d9.webp)

![](https://developer.qcloudimg.com/http-save/yehe-8241798/65e7bcade2f1c4b8079eefeab164dd65.webp)

### 🎨 **可视化主题配置中心**

内置 18 种主题主色、明暗模式、圆角档位与路由动画，满足多品牌与个性化展示需求

![202606/jxciclhjhlojegpmes69ut249w68uwaq.png](https://developer.qcloudimg.com/http-save/yehe-8241798/3d58b37126196807ac0a8481858a0d87.webp)

### 🌐 **国际化支持**

多语言（中/英）一键切换，通过后台可视化管理配置，灵活适配企业级后台与多地域业务场景

### 🛡️ **细粒度权限与动态菜单系统**

集成角色权限（RBAC）、动态菜单生成、按钮级权限控制，前后端统一鉴权，精准管控每个操作节点

当用户登录后，后端需要查询聚合数据：

1.  通过 `userRoles` 找到用户关联的所有 `roleId`。
    
2.  通过 `roleMenus` 找到这些角色关联的所有 `menuId`。
    
3.  权限合并规则：如果用户拥有多个角色，且多个角色都拥有同一个菜单的权限，则权限位 `permissions` 取最大值（按位或运算 |）。
    

权限位（Bitmask）的计算与判断，假设我们定义了以下权限常量：

    // 建议使用 2 的幂次方
    export const PERMISSIONS = {
      VIEW: 1 << 0, // 1 -> 查看
      CREATE: 1 << 1, // 2 -> 新增
      EDIT: 1 << 2, // 4 -> 编辑
      DELETE: 1 << 3, // 8 -> 删除
      EXPORT: 1 << 4, // 16 -> 导出
    };

如何在业务代码中判断是否有某个权限：

    // 假设从数据库查出的 role_menus.permissions 为 7 (意味着包含 1+2+4，即 查看+新增+编辑)
    const userPermissions = 7; 
    
    // 检查是否有 "删除" 权限 (8)
    const canDelete = (userPermissions & PERMISSIONS.DELETE) === PERMISSIONS.DELETE;
    // 结果：false (因为 7 & 8 = 0)
    
    // 检查是否有 "查看" 权限 (1)
    const canView = (userPermissions & PERMISSIONS.VIEW) === PERMISSIONS.VIEW;
    // 结果：true (因为 7 & 1 = 1)

**注意点：PostgreSQL 的 integer 类型是 32位有符号整数，最大值为 2,147,483,647（即231−1），这意味着您最多只能定义 31 个不同的权限位（0 到 30）。**

### 🔄 **智能版本更新提示**

内置 `nuxt-skew-protection` 版本检测机制，自动提示用户刷新获取最新版本，避免旧版本缓存导致功能不一致问题

核心代码：

    <SkewNotification v-slot="{ isCurrentChunksOutdated, dismiss, reload, timeAgo }">
        <Transition
          enter-active-class="transition duration-300 ease-out"
          enter-from-class="opacity-0 translate-y-2"
          enter-to-class="opacity-100 translate-y-0"
          leave-active-class="transition duration-200 ease-in"
          leave-from-class="opacity-100 translate-y-0"
          leave-to-class="opacity-0 translate-y-2"
        >
          <div v-if="isCurrentChunksOutdated" class="fixed bottom-4 right-4 z-50">
            <div class="flex items-center gap-3 bg-white dark:bg-gray-900 rounded-full shadow-lg ring-1 ring-gray-200 dark:ring-gray-800 px-4 py-3">
              <span class="text-lg">✨</span>
              <div class="text-sm font-medium">
                检测到新版本! {{ timeAgo }}
              </div>
              <UButton color="primary" size="xs" :label="i18nCommon('reload')" icon="lucide:refresh-cw" @click="reload" />
              <UButton color="neutral" variant="ghost" size="xs" icon="i-heroicons-x-mark-20-solid" @click="dismiss" />
            </div>
          </div>
        </Transition>
      </SkewNotification>

示例：

![](https://developer.qcloudimg.com/http-save/yehe-8241798/dc5880a45c7376755e356ad3e2ff4c34.webp)

## 🛠️ 技术栈

\- **前端框架**：[Vue 3.5](https://vuejs.org/) + [Nuxt.js 4+](https://nuxt.com/)

\- **UI 组件库**：[Nuxt UI 4.9](https://ui.nuxt.com/)

\- **认证框架**：[Better-Auth 1.6](https://www.better-auth.com/)

\- **数据库 ORM**：[Drizzle ORM 0.45](https://orm.drizzle.team/)

\- **数据库**：[PostgreSQL 16](https://www.postgresql.org/)

## 📂 文件目录

    better-nuxt/
    ├── .nuxt/                  # Nuxt 自动生成的构建目录（通常不需要手动修改）
    ├── app/ 
        └── assets/                 # 静态资源目录（未编译的样式、图片、字体等）
        └── components/             # Vue 组件目录（支持自动导入）
        └── composables/            # 组合式 API 目录（自动导入）
        └── layouts/                # 布局组件目录（如 DefaultLayout, AuthLayout）
        └── middleware/             # 中间件目录（路由守卫、权限校验等）
        └── pages/                  # 页面视图目录（基于文件系统的路由）
    ├── public/                 # 静态资源目录（不经过打包处理，如 robots.txt, favicon.ico）
    ├── server/                 # 后端 API 服务目录（Nuxt Nitro Server）
    │   └── api/                # API 路由接口
    │   └── middleware/         # 服务器端中间件
    ├── .env                    # 环境变量配置文件（注意勿提交至版本库）
    ├── .gitignore              # Git 忽略文件配置
    ├── app.config.ts           # 应用配置文件
    ├── auth-schema.ts          # Better-Auth 认证相关 Schema 定义
    ├── CHANGELOG.md            # 版本更新日志
    ├── commitlint.config.js    # Commit 提交规范校验配置
    ├── drizzle.config.ts       # Drizzle ORM 配置文件
    ├── eslint.config.mjs       # ESLint 代码规范配置文件
    ├── LICENSE                 # 开源许可证文件
    ├── nuxt.config.ts          # Nuxt 核心配置文件
    ├── package.json            # 项目依赖及脚本管理文件
    ├── package-lock.json       # 依赖版本锁定文件
    ├── README.md               # 项目说明文档
    └── tsconfig.json           # TypeScript 配置文件

## 🔐 RBAC 权限映射关系

![](https://developer.qcloudimg.com/http-save/yehe-8241798/4a8dcadb752ce9f8db739a580fec3364.webp)

## 🪴 演示图

![](https://developer.qcloudimg.com/http-save/yehe-8241798/7f2a1746c42d7b6e4985a205778d18c3.webp)

![](https://developer.qcloudimg.com/http-save/yehe-8241798/92d922c14cef86fb919bfce80f604a10.webp)

![](https://developer.qcloudimg.com/http-save/yehe-8241798/938592f7d528586f91c6c188c1990ac8.webp)

![](https://developer.qcloudimg.com/http-save/yehe-8241798/242116f6bbefaf7ee25e4c91a5022f8b.webp)

![](https://developer.qcloudimg.com/http-save/yehe-8241798/c7ea9797dadcd600e4d6c545ef699875.webp)

![](https://developer.qcloudimg.com/http-save/yehe-8241798/7d303660462ae6fd409bbb228da5a438.webp)

## 🍄 总结

这次从鉴权入手，一路做到权限管理，虽然范围远超最初设想，但整个过程反而成了最好的学习方式——在真实场景中边做边学，遇到问题再倒逼自己去理解 `Better Auth` 的机制和 `Nuxt.js` 的生态。项目目前还在持续完善中，后续也会继续补充更多功能。如果你也在研究类似的技术方案，或者对 `Better Auth` 有兴趣，欢迎一起交流，也希望能给正在做技术选型的朋友一些参考。代码已开源，感兴趣的话欢迎 `star` 或提 `issue`，任何反馈都对我很有帮助。

-   本项目未经严格测试，可能存在 `Bug`，欢迎反馈。
    
-   本项目仅供学习交流，禁止用于商业用途。

Github：[https://github.com/baiwumm/better-nuxt](https://github.com/baiwumm/better-nuxt)

线上预览：[https://nuxt.baiwumm.com/](https://nuxt.baiwumm.com/)

Hello，感觉已经很久没有认真写文章了。自从 AI 热潮席卷技术圈之后，传统的技术路线文章似乎渐渐失去了原本的参考意义。

探索 Nuxt.js 全栈能力：用 Better-Auth 打造类型安全的 RBAC 权限系统

这篇文章介绍了使用 Nuxt.js 和 Better-Auth 构建一个类型安全的 RBAC 权限系统的全栈后台管理系统，涵盖登录注册、动态菜单、权限控制、主题配置、国际化等功能，结合现代技术栈实现高性能和安全可靠的认证体系。

前端开发工程师

编程语言

前端

开发工具

BetterNuxt是基于Nuxt.js和Better-Auth的全栈后台管理系统，集成SSR/SSG混合渲染、RBAC权限控制、国际化、主题配置等企业级功能。采用NuxtUI+DrizzleORM+PostgreSQL技术栈，提供开箱即用的认证系统和动态菜单管理，是学习现代Web开发的理想项目。

文件系统

身份验证

SQL数据库

PostgreSQL

TypeScript

服务器

中间件

数据库

路由

React

2026上云采购 | AI焕新·智启新局

postgres

文章

问答

视频

教程

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云智能顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

EdgeOne AI 安全实战专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

聚焦“写作效率、视觉美观与运行性能”三方面进行全面升级，为您提供更高效、稳定的创作环境

社区富文本&Markdown编辑器全新改版上线，欢迎大家体验!

诚挚邀请您参与本次调研，分享您的真实使用感受与建议。您的反馈至关重要，感谢您的支持与参与！

社区新版编辑器体验调研

探索 Nuxt.js 全栈能力：用 Better-Auth 打造类型安全的 RBAC 权限系统-腾讯云开发者社区-腾讯云

探索 Nuxt.js 全栈能力：用 Better-Auth 打造类型安全的 RBAC 权限系统

探索 Nuxt.js 全栈能力：用 Better-Auth 打造类型安全的 RBAC 权限系统

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐