Bulletproof React 示例应用全景解析：数据模型、角色权限与注册流程

Bulletproof React 示例应用全景解析数据模型、角色权限与注册流程【免费下载链接】bulletproof-react️ ⚛️ A simple, scalable, and powerful architecture for building production ready React applications.项目地址: https://gitcode.com/GitHub_Trending/bu/bulletproof-reactBulletproof React 仓库通过一个团队 讨论主题的小型示例应用展示了生产级 React 应用所需的完整能力认证授权、角色化访问控制、API 层抽象、Mock 数据服务等。本文以仓库官方文档 Application Overview 为核心结合示例应用的类型定义、MSW Mock 服务与授权实现拆解该应用的业务模型与关键实现帮助读者理解这套架构是如何用一个简单的业务场景串联起整条技术链路的。应用做什么团队与讨论官方文档对示例应用的定位非常简洁用户可以创建团队Team其他用户可以加入团队团队成员之间就不同话题展开讨论Discussion。这一业务看似简单但恰好覆盖了真实应用中的几类核心问题认证与注册登录、注册、登出、当前用户信息获取多租户隔离所有数据按团队teamId隔离用户只能访问本团队的内容角色权限不同角色的用户拥有不同的操作能力CRUD 全流程讨论与评论的创建、编辑、删除以及用户管理的删除操作。仓库提供了三个可运行的示例应用分别基于不同的技术栈业务逻辑一致React ViteNext.js App RouterNext.js Pages Router以 Vite 版本为例阅读 README 并按照其中的脚本说明安装依赖、启动应用与 Mock 服务器即可体验完整功能。数据模型四个核心实体文档定义的数据模型包含 User、Team、Discussion、Comment 四个实体。仓库中对应的前端类型定义位于 types/api.ts文件头部明确注释了这类 API 类型理想情况下应自动生成并保持与后端同步。通用基类所有实体都继承自BaseEntityexport type BaseEntity { id: string; createdAt: number; }; export type EntityT { [K in keyof T]: T[K]; } BaseEntity;分页接口则统一附带Meta元信息page、total、totalPages这与 Mock 层返回的分页结构一一对应。四个实体一览实体关键字段说明UserfirstName、lastName、email、roleADMIN \| USER、teamId、bio用户属于某个团队携带角色Teamname、description团队有 1 个管理员和多个普通成员Discussiontitle、body、teamId、author由团队成员创建的讨论内嵌作者信息Commentbody、discussionId、author讨论中的消息内嵌作者信息值得注意的是Discussion与Comment直接内嵌了author: User而非仅存外键 ID——从 Mock 服务端的实现看数据库模型中存的是authorId返回响应时会查询用户并组装为author对象见 discussions.ts 中findMany后按authorId回查db.user并sanitizeUser的逻辑。Mock 数据库模型的完整定义可参考 testing/mocks/db.ts其中user模型额外持有password字段前端类型中刻意不包含密码。角色与权限ADMIN 与 USER文档明确了两种角色及其能力边界能力ADMINUSER创建/编辑/删除讨论✅❌删除任意评论✅仅可删除自己的评论删除用户✅❌编辑自己的资料✅✅这套规则在仓库中有两层落地前端授权层。lib/authorization.tsx 定义了ROLES枚举、基于角色的checkAccess钩子以及细粒度的策略表POLICIESexport const POLICIES { comment:delete: (user: User, comment: Comment) { if (user.role ADMIN) { return true; } if (user.role USER comment.author?.id user.id) { return true; } return false; }, };comment:delete策略精确复现了文档中USER 只能删自己的评论、ADMIN 可删所有评论的规则Authorization组件则支持按allowedRoles或自定义policyCheck布尔值渲染受保护内容不满足时展示forbiddenFallback。Mock 服务端API 层。各 Mock handler 中通过requireAuth/requireAdmin做服务端式校验例如 users.ts 中删除用户接口会先调用requireAdmin(user)且where条件同时限定teamId保证管理员也只能删除本团队成员discussions.ts 中创建/编辑/删除讨论同样调用requireAdmin查询讨论时则以teamId: { equals: user?.teamId }实现多租户隔离。这一前后台双校验的写法正是该仓库安全实践参考 security 文档的体现前端隐藏操作入口只是体验问题Mock 层代表的服务端校验才是权限的真正防线。注册流程团队创建的时机文档提到一个关键业务规则如果注册时用户没有选择加入已有团队系统会为其创建团队且该用户自动成为团队管理员。这条规则的前后端实现可以完整追踪到表单层。register-form.tsx 提供一个 Join Existing Team 开关关闭时提交teamName新团队名开启时从 teams API 拉取的团队列表中选择teamId校验层。lib/auth.tsx 中的registerInputSchema用 Zod 定义了一个.and(...)联合校验teamId与teamName必须二选一且互斥从类型层面保证了文档所述的两条注册路径服务端层。testing/mocks/handlers/auth.ts 的/auth/register处理器完整实现了该规则if (!userObject.teamId) { const team db.team.create({ name: userObject.teamName ?? ${userObject.firstName} Team, }); teamId team.id; role ADMIN; } else { const existingTeam db.team.findFirst({ where: { id: { equals: userObject.teamId } }, }); if (!existingTeam) { return HttpResponse.json( { message: The team you are trying to join does not exist! }, { status: 400 }, ); } teamId userObject.teamId; role USER; }未传teamId则建团队并赋予ADMIN角色传了teamId则校验团队存在性不存在返回 400存在则以USER角色加入。注册成功后响应通过Set-Cookie写入 JWT同时返回AuthResponsejwtuser前端由react-query-auth的configureAuth见 lib/auth.tsx接管用户会话与ProtectedRoute路由守卫。Mock 数据服务没有后端也能跑通全应用示例应用不依赖真实后端而是通过 MSWMock Service Worker模拟整个 API。理解这一点是读懂整个数据模型的关键内存数据库testing/mocks/db.ts 基于mswjs/data工厂定义user/team/discussion/comment四张表与 types/api.ts 的实体一一对应持久化Node 环境下写入mocked-db.json浏览器环境存入localStorage键名msw-db因此刷新页面数据不丢失persistDb在NODE_ENV test时跳过写盘保证测试的隔离性Handler 集合testing/mocks/handlers 下按资源拆分auth.ts、teams.ts、discussions.ts、comments.ts、users.ts路由统一以env.API_URL为前缀独立 Mock 服务器根目录的 mock-server.ts 让 Mock API 可以在 Node 进程中独立启动前端应用照常发起 HTTP 请求与连接真实后端时的行为完全一致。这套机制意味着文档中描述的每一个实体、每一条权限规则都能在 Mock 层找到可执行的代码证据同时前端代码只面向API_URL编程替换为真实后端时应用代码几乎无需改动。小结Bulletproof React 的示例应用体量很小但数据模型设计得相当讲究BaseEntity统一了 ID 与时间戳Meta统一了分页协议角色权限同时落在前端策略表与 Mock 服务端两处注册流程则用 Zod 联合类型把业务规则固化为可校验的契约。以 docs/application-overview.md 为入口配合本文引用的类型定义、Mock 数据服务与授权实现可以完整看到业务需求 → 数据模型 → API 契约 → 前端实现的落地图景更深层的目录组织、API 分层、测试与安全实践可继续阅读 Project Standards、Project Structure 与 API Layer 等配套文档。【免费下载链接】bulletproof-react️ ⚛️ A simple, scalable, and powerful architecture for building production ready React applications.项目地址: https://gitcode.com/GitHub_Trending/bu/bulletproof-react创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考