前言
坦白说，自从AI热潮席卷技术圈以后，传统技术路线的文章好像越来越失去参考意义了。写这篇文章的初衷，其实是对Better Auth挺感兴趣，想借着新项目系统学习一下。技术选型时在Next.js和Nuxt.js之间犹豫了一阵——毕竟之前用Next.js做了不少项目，已经很熟悉了，而且工作中也主要用React技术栈。但这次想尝试点不一样的，最终选了Nuxt.js。
原本的计划只是实现一个基础鉴权模块，登录、注册这些核心功能做完就收工。结果开发推进过程中，又觉得动态菜单和权限配置也得一并加上——好吧，功能越做越多，不知不觉就成了现在这个规模。
项目简介
Better Nuxt 是一个现代化的全栈后台管理系统，前端基于Nuxt.js和Nuxt UI构建，后端采用Better-Auth认证框架与Drizzle ORM配合PostgreSQL数据库实现。项目整合了当前比较流行的前后端技术栈，适合作为学习全栈开发和现代认证授权的参考项目。
特性
现代化全栈架构
-
前沿技术：深度整合
Nuxt 3、Better-Auth、Nuxt UI、Drizzle与PostgreSQL，紧跟现代Web技术趋势。 -
极致性能：SSR/SSG混合渲染，配合高效数据库查询优化，兼顾SEO与用户体验。
-
安全可靠：内置完备认证体系，结合强类型定义，从源头降低运行时错误。
开箱即用的认证系统
集成Better-auth，支持多策略身份验证、会话管理与权限控制，为应用提供安全可靠的用户体系。
 |
 |
 |
 |
可视化主题配置中心
内置18种主题主色、明暗模式、圆角档位与路由动画，满足多品牌与个性化展示需求。
国际化支持
多语言（中/英）一键切换，通过后台可视化管理配置，灵活适配企业级后台与多地域业务场景。
细粒度权限与动态菜单系统
集成角色权限（RBAC）、动态菜单生成、按钮级权限控制，前后端统一鉴权，精准管控每个操作节点。
当用户登录后，后端需要查询聚合数据：
-
通过
userRoles找到用户关联的所有roleId。 -
通过
roleMenus找到这些角色关联的所有menuId。 -
权限合并规则：如果用户拥有多个角色，且多个角色都拥有同一个菜单的权限，则权限位
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（即2^31−1），这意味着最多只能定义31个不同的权限位（0到30）。
智能版本更新提示
内置nuxt-skew-protection版本检测机制，自动提示用户刷新获取最新版本，避免旧版本缓存导致功能不一致问题。
核心代码：
检测到新版本! {{ timeAgo }}
示例：
技术栈
- 前端框架：Vue 3.5 + Nuxt.js 4+
- UI 组件库：Nuxt UI 4.9
- 认证框架：Better-Auth 1.6
- 数据库 ORM：Drizzle ORM 0.45
- 数据库：PostgreSQL 16
文件目录
better-nuxt/
├── .nuxt/ # Nuxt 自动生成的构建目录（通常不需要手动修改）
├── app/
└── assets/ # 静态资源目录（未编译的样式、图片、字体等）
└── components/ # Vue 组件目录（支持自动导入）
└── composables/ # 组合式 API 目录（自动导入）
└── layouts/ # 布局组件目录（如 DefaultLayout, AuthLayout）
└── middleware/ # 中间件目录（路由守卫、权限校验等）
└── pages/ # 页面视图目录（基于文件系统的路由）
├── public/ # 静态资源目录（不经过打包处理，如 robots.txt, fa vicon.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 权限映射关系
演示图
 |
 |
 |
 |
 |
 |
总结
这次从鉴权入手，一路做到权限管理，虽然范围远超最初设想，但整个过程反而成了最好的学习方式——在真实场景中边做边学，遇到问题再倒逼自己去理解Better Auth的机制和Nuxt.js的生态。项目目前还在持续完善中，后续也会继续补充更多功能。代码已开源，如果也在研究类似技术方案，或者对Better Auth有兴趣，希望能给正在做技术选型的朋友一些参考。
-
本项目未经严格测试，可能存在Bug，欢迎反馈。
-
本项目仅供学习交流，禁止用于商业用途。
