Nuxt.js全栈实战：Better-Auth打造类型安全RBAC权限系统

前言

坦白说，自从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）、动态菜单生成、按钮级权限控制，前后端统一鉴权，精准管控每个操作节点。

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

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（即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，欢迎反馈。

• 本项目仅供学习交流，禁止用于商业用途。