open-saas 完整指南一份能跑的 SaaS 模板内置 RESTful API 与 React 前端集成【免费下载链接】open-saasA 100% free modern JS SaaS boilerplate (React, NodeJS, Prisma). Full-featured: Auth (email, google, github, slack, MS), Email sending, Background jobs, Landing page, Payments (Stripe, Polar.sh), Shadcn UI, S3 file upload. AI-ready with tailored AGENTS.md, skills, and Claude Code plugin. One cmd deploy. Powered by Wasp full-stack framework.项目地址: https://gitcode.com/GitHub_Trending/op/open-saasopen-saas 是一份免费的 SaaS 模板用户系统、订阅支付、文件上传这些每次都要重写的部分它以 RESTful API 的形式内置好了前端集成也一并做完了。技术栈是 TypeScript、React、Prisma 和 Node.js基于 Wasp 全栈框架。你拿到手不用从零搭架构把业务逻辑填进去就能跑。下面不按模块罗列而是按你开发一个 SaaS 时真正会依次遇到的问题来讲先搞定用户和权限再接收款再处理文件存储最后看前端怎么接入。先把用户和权限跑通登录态靠 JWT 驱动用户登录后由框架签发 token之后每次 API 请求都会自动带上当前用户你几乎不用手写鉴权代码。权限判断为什么放在 context 里Wasp 框架负责签发和校验 token校验通过后把用户信息注入到每个操作的 context.user 里。业务代码只需检查这个字段约定很统一没登录抛 401登录了但没权限抛 403。以管理员开关权限为例核心逻辑就两层判断if (!context.user) throw new HttpError(401, 未登录); if (!context.user.isAdmin) throw new HttpError(403, 仅限管理员);登录方式也在 src/auth/auth.wasp.ts 里集中声明邮件验证、密码重置开箱即用Google、GitHub 等第三方登录取消注释即可启用。用户列表怎么查getPaginatedUsers实现在 src/user/operations.ts支持翻页、按邮箱模糊搜索、按订阅状态筛选管理员后台的用户表格就是靠它驱动的。改某位用户的权限则走同一个文件里的updateIsUserAdminById。订阅收款怎么接模板把卖订阅拆成了三个环节计划定义、发起结账、支付完成后同步状态每个环节都有现成接口。支付会话怎么生成计划定义集中在 src/payment/plans.ts预置了 Hobby、Pro 两个订阅和 10 Credits 一次购买三档。用户点击购买时前端调用generateCheckoutSession服务端返回收银台 URL浏览器跳转过去完成支付接口在 src/payment/operations.ts。支付结果谁来同步跳转支付页之后真正记账的是 Webhook支付完成后处理器回调你的服务端更新用户的订阅状态。Stripe 之外的 Polar 等处理器也有各自的 webhook 文件接口风格一致。订阅管理要不要自己写页面不用。getCustomerPortalUrl直接返回支付方的客户门户链接用户改卡、退订都在那边完成你省掉一整块容易出错的 UI。文件上传为什么用预签名 URL结论让浏览器直传 S3你的服务器只发凭证、不中转文件。上传流程分四步前端调createFileUploadUrl拿到预签名上传 URL浏览器把文件直传 S3调addFileToDb把文件元数据入库入库前服务端会确认 S3 里确实有这个对象删除走deleteFile数据库记录和 S3 对象一起清掉。相关代码在 src/file-upload/operations.tsS3 细节封装在同目录的 s3Utils.ts。预签名 URL 解决了什么三个问题一次解决服务器带宽不被大文件拖垮因为流量走的是 S3S3 密钥不用暴露给浏览器因为凭证是短时效、单次有效的签名服务端还能在发凭证前校验文件类型白名单在 validation.ts 里定义。前端接入只做三件事React 侧的接入方式统一掌握三件事就能覆盖全部页面。API 调用怎么封装所有接口都通过 Wasp 生成的客户端调用查询类用useQuery命令类直接 await。你不用手写 fetch也不用自己管 loading、缓存和重试状态const { data: customerPortalUrl, error } useQuery(getCustomerPortalUrl, { enabled: isUserSubscribed });错误怎么处理服务端统一抛带 HTTP 状态码的错误401/403/404前端 catch 之后读 error.message 弹提示。定价页的做法值得抄把错误信息存进 state 显示在页面上同时保持按钮可重试而不是让页面白屏。前后端类型怎么同步关键动作只有一个共享定义。比如PaymentPlanId枚举定义在 plans.ts 里定价页、服务端操作、Webhook 都 import 同一份。新增一个计划时改一处两边编译器立刻帮你把漏掉的地方标红这类 bug 基本绝迹。快速上手四步从克隆到跑起来四步以内。拿到代码并装依赖git clone https://gitcode.com/GitHub_Trending/op/open-saas cd open-saas/template/app npm install配环境、起服务在项目根目录建.env.client和.env.server填入本地开发用的环境变量S3、支付密钥按用到的功能填。wasp start db起数据库保持运行。wasp start起应用浏览器里就能看到落地页、定价页和管理后台。写在最后open-saas 把用户、支付、上传这套 RESTful API 做成了可以直接跑的模板前端用 React 按同一套约定接入你的时间可以全部花在业务逻辑上。模板应用入口template/app/支付处理器实现template/app/src/payment/管理后台页面template/app/src/admin/【免费下载链接】open-saasA 100% free modern JS SaaS boilerplate (React, NodeJS, Prisma). Full-featured: Auth (email, google, github, slack, MS), Email sending, Background jobs, Landing page, Payments (Stripe, Polar.sh), Shadcn UI, S3 file upload. AI-ready with tailored AGENTS.md, skills, and Claude Code plugin. One cmd deploy. Powered by Wasp full-stack framework.项目地址: https://gitcode.com/GitHub_Trending/op/open-saas创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
