☘️ 前言Hello感觉已经很久没有认真写文章了。自从 AI 热潮席卷技术圈之后传统的技术路线文章似乎渐渐失去了原本的参考意义。这次项目的开发初衷其实是对Better Auth很感兴趣想借助一个全新项目来系统学习它。在技术选型阶段我在Next.js和Nuxt.js之间犹豫了一下。不过考虑到自己之前已经用Next.js做过不少项目比较熟悉而且工作中也主要使用React相关技术栈所以这次决定尝试点不一样的最终选择了Nuxt.js。原本的计划只是实现一个基础的鉴权模块包括登录、注册这些核心功能。但随着开发的推进又觉得动态菜单和权限配置也应该一并加上于是功能越做越多不知不觉就发展成了现在这个规模。如果大家有兴趣欢迎去看看也欢迎交流讨论。 项目简介Better Nuxt 是一个现代化的全栈后台管理系统前端基于Nuxt.js和Nuxt UI构建后端采用Better-Auth认证框架与Drizzle ORM配合PostgreSQL数据库实现。https://github.com/baiwumm/better-nuxt本项目集成了当前流行的前后端技术栈是学习全栈开发和现代认证授权的理想参考项目。✨ 特性现代化全栈架构前沿技术深度整合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 (意味着包含 124即 查看新增编辑) 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版本检测机制自动提示用户刷新获取最新版本避免旧版本缓存导致功能不一致问题https://nuxtseo.com/docs/skew-protection/getting-started/introduction核心代码SkewNotification v-slot{ isCurrentChunksOutdated, dismiss, reload, timeAgo } Transition enter-active-classtransition duration-300 ease-out enter-from-classopacity-0 translate-y-2 enter-to-classopacity-100 translate-y-0 leave-active-classtransition duration-200 ease-in leave-from-classopacity-100 translate-y-0 leave-to-classopacity-0 translate-y-2 div v-ifisCurrentChunksOutdated classfixed bottom-4 right-4 z-50 div classflex 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 classtext-lg✨/span div classtext-sm font-medium 检测到新版本! {{ timeAgo }} /div UButton colorprimary sizexs :labeli18nCommon(reload) iconlucide:refresh-cw clickreload / UButton colorneutral variantghost sizexs iconi-heroicons-x-mark-20-solid clickdismiss / /div /div /Transition /SkewNotification示例️ 技术栈-前端框架Vue 3.5 Nuxt.js 4-UI 组件库Nuxt UI 4.9-认证框架Better-Auth 1.6-数据库 ORMDrizzle ORM 0.45-数据库PostgreSQL 16 文件目录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 权限映射关系 演示图 总结这次从鉴权入手一路做到权限管理虽然范围远超最初设想但整个过程反而成了最好的学习方式——在真实场景中边做边学遇到问题再倒逼自己去理解Better Auth的机制和Nuxt.js的生态。项目目前还在持续完善中后续也会继续补充更多功能。如果你也在研究类似的技术方案或者对Better Auth有兴趣欢迎一起交流也希望能给正在做技术选型的朋友一些参考。代码已开源感兴趣的话欢迎star或提issue任何反馈都对我很有帮助。本项目未经严格测试可能存在Bug欢迎反馈。本项目仅供学习交流禁止用于商业用途。Githubhttps://github.com/baiwumm/better-nuxt线上预览https://nuxt.baiwumm.com/