oh-my-claudecode 教程 10：实战案例 - 从需求到上线的完整工作流

教程概述

本教程是一个端到端的实战案例，演示如何综合运用 oh-my-claudecode 的所有功能，完成一个用户认证系统的开发。

你将学到

✅ 完整的开发工作流程
✅ 如何组合使用各种 OMC 功能
✅ 最佳实践和经验总结
✅ 常见问题和解决方案

案例背景

任务描述

为博客系统开发一个完整的用户认证系统：

用户注册与登录
JWT Token 认证
密码重置
会话管理

技术栈

层级	技术选择
前端	React + TypeScript
后端	Node.js + Express
数据库	PostgreSQL
认证	JWT + bcrypt

质量要求

测试覆盖率 >= 80%
安全审查通过
API 响应时间 < 100ms

阶段 1：需求澄清

使用 Deep-Interview

由于需求比较模糊，首先使用 Deep-Interview 澄清细节：

deep-interview "I want to add user authentication to my blog system"

访谈过程

## Deep-Interview Results

### Round 1: Core Questions

**Q1**: 用户认证方式？
A: 邮箱 + 密码，可选社交登录

**Q2**: 会话管理策略？
A: JWT Token，7 天过期，支持 Refresh Token

**Q3**: 安全要求？
A: 密码加密、防止暴力破解、XSS/CSRF 防护

### Round 2: Detail Questions

**Q4**: 密码重置流程？
A: 邮件发送重置链接，24 小时有效

**Q5**: 用户角色？
A: 普通用户、管理员

**Q6**: 并发登录限制？
A: 同一用户最多 5 个活跃会话

### Clarity Score: 94%

生成 PRD 文档...

输出 PRD

# 用户认证系统 PRD

## 功能需求

### 1. 用户注册
- 邮箱验证
- 密码强度检查
- 防止重复注册

### 2. 用户登录
- 邮箱 + 密码登录
- 登录失败次数限制
- 记住登录状态

### 3. Token 管理
- Access Token: 15 分钟
- Refresh Token: 7 天
- 自动刷新机制

### 4. 密码重置
- 邮件发送重置链接
- Token 24 小时有效
- 一次性使用

### 5. 会话管理
- 查看活跃会话
- 注销特定会话
- 注销所有会话

## 非功能需求

- 性能: API 响应 < 100ms
- 安全: 通过 OWASP Top 10 检查
- 可用性: 99.9% 正常运行时间

阶段 2：共识规划

使用 Ralplan

ralplan --interactive "implement the user authentication system based on the PRD"

规划结果

## RALPLAN-DR Summary

### Principles
1. 安全优先：所有认证逻辑必须通过安全审查
2. 测试驱动：先写测试，后写实现
3. 模块化设计：认证逻辑独立于业务逻辑

### Decision Drivers
1. JWT 认证方案成熟可靠
2. PostgreSQL 支持事务和复杂查询
3. TypeScript 提供类型安全

### Implementation Plan

## Phase 1: 数据库层
- Task 1: 创建 users 表迁移
- Task 2: 创建 sessions 表迁移
- Task 3: 创建 refresh_tokens 表迁移

## Phase 2: 后端 API
- Task 4: 实现用户模型
- Task 5: 实现 AuthService
- Task 6: 实现 AuthController
- Task 7: 定义 API 路由

## Phase 3: 前端
- Task 8: 创建登录组件
- Task 9: 创建注册组件
- Task 10: 实现认证状态管理

## Phase 4: 测试与验证
- Task 11: 单元测试
- Task 12: 集成测试
- Task 13: 安全审查

阶段 3：团队执行

启动 Team 模式

/team 5:executor "implement the authentication system based on the plan"

执行时间线

gantt
    title 认证系统开发时间线
    dateFormat mm:ss

    section Phase 1
    数据库迁移        :a1, 00:00, 5m

    section Phase 2
    用户模型          :a2, 00:05, 8m
    AuthService       :a3, 00:13, 12m
    AuthController    :a4, 00:25, 10m
    API 路由          :a5, 00:35, 5m

    section Phase 3
    登录组件          :a6, 00:40, 8m
    注册组件          :a7, 00:48, 8m
    状态管理          :a8, 00:56, 6m

    section Phase 4
    单元测试          :a9, 01:02, 10m
    集成测试          :a10, 01:12, 8m
    安全审查          :a11, 01:20, 5m

并行执行详情

Worker 1-3：后端开发

# Worker 1: 数据库 + 模型
# Worker 2: Service 层
# Worker 3: Controller + 路由

Worker 4：前端开发

# React 组件 + 状态管理

Worker 5：测试准备

# 测试用例编写，与后端并行

任务依赖图

flowchart TD
    T1[Task 1: users 表] --> T4[Task 4: 用户模型]
    T2[Task 2: sessions 表] --> T5[Task 5: AuthService]
    T3[Task 3: tokens 表] --> T5

    T4 --> T6[Task 6: AuthController]
    T5 --> T6
    T6 --> T7[Task 7: API 路由]

    T7 --> T8[Task 8: 登录组件]
    T7 --> T9[Task 9: 注册组件]

    T8 --> T10[Task 10: 状态管理]
    T9 --> T10

    T7 --> T11[Task 11: 单元测试]
    T10 --> T12[Task 12: 集成测试]

    T11 --> T13[Task 13: 安全审查]
    T12 --> T13

    style T1 fill:#e8f5e9
    style T4 fill:#e1f5ff
    style T8 fill:#fff3e0
    style T13 fill:#f3e5f5

阶段 4：验证与交付

运行测试

# 单元测试
npm test

# 集成测试
npm run test:integration

# 覆盖率报告
npm run coverage

测试结果：

Test Suites: 12 passed, 12 total
Tests:       86 passed, 86 total
Coverage:    85.3% statements, 78.2% branches

安全审查

/team 1:security-reviewer "audit the authentication module for OWASP Top 10"

审查报告：

## Security Audit Report

### Passed Checks ✅
- [x] Password hashing with bcrypt (cost factor: 12)
- [x] JWT secret rotation support
- [x] CSRF protection enabled
- [x] Rate limiting on login endpoint
- [x] Input validation on all endpoints

### Recommendations 🔧
- Consider adding CAPTCHA for repeated failed logins
- Add audit logging for sensitive operations
- Implement IP-based rate limiting

### Severity: LOW
Overall security posture: GOOD

性能验证

# API 基准测试
ab -n 1000 -c 10 http://localhost:3000/api/auth/login

# 结果
Requests per second:    852.31 [#/sec]
Time per request:       11.732 [ms] (mean)

阶段 5：代码审查

使用 Code-Reviewer

/team 1:code-reviewer "review all authentication-related code changes"

审查结果

## Code Review Report

### Summary
- Files reviewed: 23
- Issues found: 5
- Critical: 0
- Major: 1
- Minor: 4

### Issues

#### Major Issue #1
**File**: src/services/AuthService.ts:45
**Issue**: Token expiration not properly handled in error case
**Fix**: Add try/finally to ensure token cleanup

```typescript
// Before
async validateToken(token: string) {
  const decoded = jwt.verify(token, secret);
  return decoded;
}

// After
async validateToken(token: string) {
  try {
    const decoded = jwt.verify(token, secret);
    return decoded;
  } catch (error) {
    await this.revokeToken(token);
    throw new AuthenticationError('Invalid token');
  }
}

Minor Issues

Add JSDoc comments to public methods
Use const instead of let in loop
Extract magic numbers to constants
Add type guards for better type inference


## 阶段 6：修复与完善

### 使用 Ralph 模式

```bash
ralph: fix all issues identified in the code review

修复循环

flowchart TD
    A[收到审查反馈] --> B[分析问题]
    B --> C[实施修复]
    C --> D[运行测试]
    D --> E{测试通过？}
    E -->|否| F[重新修复]
    F --> C
    E -->|是| G[验证修复]
    G --> H{所有问题解决？}
    H -->|否| B
    H -->|是| I[完成]

    style A fill:#fff3e0
    style I fill:#e8f5e9

最终交付

完成检查清单

## 认证系统交付检查清单

### 功能完整性
- [x] 用户注册（邮箱验证）
- [x] 用户登录（失败限制）
- [x] Token 管理（Access + Refresh）
- [x] 密码重置（邮件发送）
- [x] 会话管理（查看/注销）

### 质量指标
- [x] 测试覆盖率: 85.3% (目标: 80%)
- [x] API 响应时间: 11.7ms (目标: < 100ms)
- [x] 安全审查: 通过
- [x] 代码审查: 通过

### 文档
- [x] API 文档
- [x] 部署指南
- [x] 安全最佳实践

文件结构

src/
├── auth/
│   ├── controllers/
│   │   └── AuthController.ts
│   ├── services/
│   │   ├── AuthService.ts
│   │   ├── TokenService.ts
│   │   └── EmailService.ts
│   ├── models/
│   │   └── User.ts
│   ├── middleware/
│   │   └── AuthMiddleware.ts
│   └── validators/
│       └── AuthValidator.ts
├── tests/
│   ├── unit/
│   │   └── auth.test.ts
│   └── integration/
│       └── auth-flow.test.ts
└── migrations/
    ├── 001_create_users.ts
    ├── 002_create_sessions.ts
    └── 003_create_refresh_tokens.ts

提取 Skill

/learner

生成的技能文件：

# .omc/skills/jwt-auth-pattern.md

---
name: JWT Authentication Pattern
description: Standard JWT authentication implementation with refresh tokens
triggers: ["jwt", "authentication", "token", "login"]
source: extracted
---

## Pattern

This skill provides a standard JWT authentication pattern with:
- Access Token (short-lived, 15 min)
- Refresh Token (long-lived, 7 days)
- Automatic token refresh
- Session management

## Implementation

[Auto-extracted from the authentication system implementation]

经验总结

成功因素

需求澄清先行：Deep-Interview 避免了后期的返工
共识规划：Planner + Architect + Critic 确保方案可行
并行执行：Team 模式大幅缩短开发时间
持续验证：Ralph 循环确保质量

踩过的坑

问题	原因	解决方案
Worker 任务冲突	任务划分不够独立	按文件/模块划分
测试失败反复	没有先写测试	采用 TDD
安全审查返工	安全考虑不足	设计阶段引入安全审查

改进建议

设计阶段引入多视角

/ccg design the authentication architecture

更细粒度的任务划分

❌ Task: 实现认证系统
✅ Task: 实现 AuthService.login 方法

持续集成验证

# 在 CI 中运行
npm test && npm run security:audit

小结

这个案例展示了 oh-my-claudecode 的完整工作流：

阶段总结

阶段	工具	价值
需求澄清	Deep-Interview	避免返工
共识规划	Ralplan	方案可靠
团队执行	Team	效率提升
验证交付	Ralph	质量保证
代码审查	Code-Reviewer	代码质量
知识沉淀	Learner	经验复用

关键要点

✅ 需求澄清是成功的基础
✅ 共识规划减少返工
✅ 并行执行提升效率
✅ 持续验证保证质量
✅ 经验沉淀实现复用

系列导航：

← 上一篇：教程 9：通知集成与 HUD 状态栏
返回：教程系列索引

恭喜你完成了 oh-my-claudecode 教程系列！

现在你已经掌握了 OMC 的全部核心功能。开始在你的项目中使用它，体验 AI 辅助开发的全新方式吧！