feat: 前端对接后端认证 API

API 客户端更新：
- 添加双 Token JWT 认证支持
- 添加 401 自动刷新 Token 机制
- 添加注册/登录/刷新 Token API
- 添加 OSS 上传凭证 API

AuthContext 更新：
- 支持真实 API 认证
- 保留开发模式 Mock 数据
- 添加 register 方法

类型定义更新：
- User 类型添加组织关联字段
- 添加 LoginCredentials、RegisterData 类型

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

frontend/contexts/AuthContext.tsx

@@ -1,19 +1,39 @@
 'use client'
 
-import { createContext, useContext, useState, useEffect, ReactNode } from 'react'
+import { createContext, useContext, useState, useEffect, ReactNode, useCallback } from 'react'
-import { User, UserRole, LoginCredentials, AuthContextType } from '@/types/auth'
+import { api, clearTokens, getAccessToken, User, UserRole, LoginRequest, RegisterRequest } from '@/lib/api'
+
+interface AuthState {
+  user: User | null
+  isAuthenticated: boolean
+  isLoading: boolean
+}
+
+interface AuthContextType extends AuthState {
+  login: (credentials: LoginRequest) => Promise<{ success: boolean; error?: string }>
+  register: (data: RegisterRequest) => Promise<{ success: boolean; error?: string }>
+  logout: () => void
+  switchRole: (role: UserRole) => void
+}
 
 const AuthContext = createContext<AuthContextType | undefined>(undefined)
 
-// 模拟用户数据（后续替换为真实 API）
+const USER_STORAGE_KEY = 'miaosi_user'
+
+// 开发模式：使用 mock 数据
+const USE_MOCK = process.env.NEXT_PUBLIC_USE_MOCK === 'true' || process.env.NODE_ENV === 'development'
+
+// Mock 用户数据
 const MOCK_USERS: Record<string, User & { password: string }> = {
   'creator@demo.com': {
     id: 'user-001',
     name: '达人小美',
     email: 'creator@demo.com',
     role: 'creator',
-    tenantId: 'tenant-001',
+    is_verified: true,
-    tenantName: '美妆品牌A',
+    creator_id: 'CR123456',
+    tenant_id: 'BR001',
+    tenant_name: '美妆品牌A',
     password: 'demo123',
   },
   'agency@demo.com': {
@@ -21,8 +41,10 @@ const MOCK_USERS: Record<string, User & { password: string }> = {
     name: '张经理',
     email: 'agency@demo.com',
     role: 'agency',
-    tenantId: 'tenant-001',
+    is_verified: true,
-    tenantName: '美妆品牌A',
+    agency_id: 'AG123456',
+    tenant_id: 'BR001',
+    tenant_name: '美妆品牌A',
     password: 'demo123',
   },
   'brand@demo.com': {
@@ -30,68 +52,110 @@ const MOCK_USERS: Record<string, User & { password: string }> = {
     name: '李总监',
     email: 'brand@demo.com',
     role: 'brand',
-    tenantId: 'tenant-001',
+    is_verified: true,
-    tenantName: '美妆品牌A',
+    brand_id: 'BR001',
+    tenant_id: 'BR001',
+    tenant_name: '美妆品牌A',
     password: 'demo123',
   },
 }
 
-const STORAGE_KEY = 'miaosi_auth'
-
 export function AuthProvider({ children }: { children: ReactNode }) {
   const [user, setUser] = useState<User | null>(null)
   const [isLoading, setIsLoading] = useState(true)
-  const [mounted, setMounted] = useState(false)
 
   // 初始化时从 localStorage 恢复登录状态
   useEffect(() => {
-    setMounted(true)
     if (typeof window !== 'undefined') {
-      const stored = localStorage.getItem(STORAGE_KEY)
+      // 检查是否有 token
-      if (stored) {
+      const token = getAccessToken()
+      const storedUser = localStorage.getItem(USER_STORAGE_KEY)
+
+      if (token && storedUser) {
         try {
-          const parsed = JSON.parse(stored)
+          const parsed = JSON.parse(storedUser)
           setUser(parsed)
         } catch {
-          localStorage.removeItem(STORAGE_KEY)
+          clearTokens()
+          localStorage.removeItem(USER_STORAGE_KEY)
         }
       }
     }
     setIsLoading(false)
   }, [])
 
-  const login = async (credentials: LoginCredentials): Promise<{ success: boolean; error?: string }> => {
+  const login = useCallback(async (credentials: LoginRequest): Promise<{ success: boolean; error?: string }> => {
-    // 模拟 API 延迟
+    try {
-    await new Promise((resolve) => setTimeout(resolve, 500))
+      if (USE_MOCK) {
+        // Mock 登录
+        await new Promise((resolve) => setTimeout(resolve, 500))
+        const email = credentials.email || ''
+        const mockUser = MOCK_USERS[email]
+        if (!mockUser) {
+          return { success: false, error: '用户不存在' }
+        }
+        if (mockUser.password !== credentials.password) {
+          return { success: false, error: '密码错误' }
+        }
+        const { password: _, ...userWithoutPassword } = mockUser
+        setUser(userWithoutPassword)
+        localStorage.setItem(USER_STORAGE_KEY, JSON.stringify(userWithoutPassword))
+        return { success: true }
+      }
 
-    const mockUser = MOCK_USERS[credentials.email]
+      // 真实 API 登录
-    if (!mockUser) {
+      const response = await api.login(credentials)
-      return { success: false, error: '用户不存在' }
+      setUser(response.user)
+      localStorage.setItem(USER_STORAGE_KEY, JSON.stringify(response.user))
+      return { success: true }
+    } catch (err) {
+      const error = err instanceof Error ? err.message : '登录失败'
+      return { success: false, error }
     }
-    if (mockUser.password !== credentials.password) {
+  }, [])
-      return { success: false, error: '密码错误' }
+
+  const register = useCallback(async (data: RegisterRequest): Promise<{ success: boolean; error?: string }> => {
+    try {
+      if (USE_MOCK) {
+        // Mock 注册（直接登录）
+        await new Promise((resolve) => setTimeout(resolve, 500))
+        const mockUser: User = {
+          id: `user-${Date.now()}`,
+          email: data.email,
+          phone: data.phone,
+          name: data.name,
+          role: data.role,
+          is_verified: false,
+        }
+        setUser(mockUser)
+        localStorage.setItem(USER_STORAGE_KEY, JSON.stringify(mockUser))
+        return { success: true }
+      }
+
+      // 真实 API 注册
+      const response = await api.register(data)
+      setUser(response.user)
+      localStorage.setItem(USER_STORAGE_KEY, JSON.stringify(response.user))
+      return { success: true }
+    } catch (err) {
+      const error = err instanceof Error ? err.message : '注册失败'
+      return { success: false, error }
     }
+  }, [])
 
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const logout = useCallback(() => {
-    const { password, ...userWithoutPassword } = mockUser
-    setUser(userWithoutPassword)
-    localStorage.setItem(STORAGE_KEY, JSON.stringify(userWithoutPassword))
-
-    return { success: true }
-  }
-
-  const logout = () => {
     setUser(null)
-    localStorage.removeItem(STORAGE_KEY)
+    clearTokens()
-  }
+    localStorage.removeItem(USER_STORAGE_KEY)
+  }, [])
 
-  const switchRole = (role: UserRole) => {
+  const switchRole = useCallback((role: UserRole) => {
     if (user) {
       const updated = { ...user, role }
       setUser(updated)
-      localStorage.setItem(STORAGE_KEY, JSON.stringify(updated))
+      localStorage.setItem(USER_STORAGE_KEY, JSON.stringify(updated))
     }
-  }
+  }, [user])
 
   return (
     <AuthContext.Provider
@@ -100,6 +164,7 @@ export function AuthProvider({ children }: { children: ReactNode }) {
         isAuthenticated: !!user,
         isLoading,
         login,
+        register,
         logout,
         switchRole,
       }}

frontend/lib/api.ts

@@ -1,7 +1,8 @@
 /**
  * API 客户端
+ * 支持双 Token JWT 认证
  */
-import axios, { AxiosInstance } from 'axios'
+import axios, { AxiosInstance, AxiosError, InternalAxiosRequestConfig } from 'axios'
 import type {
   VideoReviewRequest,
   VideoReviewResponse,
@@ -15,11 +16,98 @@ import type {
   TaskVideoUploadRequest,
 } from '@/types/task'
 
-const API_BASE_URL = process.env.API_BASE_URL || 'http://localhost:8000'
+const API_BASE_URL = process.env.NEXT_PUBLIC_API_BASE_URL || 'http://localhost:8000'
+const STORAGE_KEY_ACCESS = 'miaosi_access_token'
+const STORAGE_KEY_REFRESH = 'miaosi_refresh_token'
+
+// ==================== 类型定义 ====================
+
+export type UserRole = 'brand' | 'agency' | 'creator'
+
+export interface User {
+  id: string
+  email?: string
+  phone?: string
+  name: string
+  avatar?: string
+  role: UserRole
+  is_verified: boolean
+  brand_id?: string
+  agency_id?: string
+  creator_id?: string
+  tenant_id?: string
+  tenant_name?: string
+}
+
+export interface LoginRequest {
+  email?: string
+  phone?: string
+  password: string
+}
+
+export interface RegisterRequest {
+  email?: string
+  phone?: string
+  password: string
+  name: string
+  role: UserRole
+}
+
+export interface LoginResponse {
+  access_token: string
+  refresh_token: string
+  token_type: string
+  expires_in: number
+  user: User
+}
+
+export interface RefreshTokenResponse {
+  access_token: string
+  token_type: string
+  expires_in: number
+}
+
+export interface UploadPolicyResponse {
+  access_key_id: string
+  policy: string
+  signature: string
+  host: string
+  dir: string
+  expire: number
+  max_size_mb: number
+}
+
+// ==================== Token 管理 ====================
+
+function getAccessToken(): string | null {
+  if (typeof window === 'undefined') return null
+  return localStorage.getItem(STORAGE_KEY_ACCESS)
+}
+
+function getRefreshToken(): string | null {
+  if (typeof window === 'undefined') return null
+  return localStorage.getItem(STORAGE_KEY_REFRESH)
+}
+
+function setTokens(accessToken: string, refreshToken: string): void {
+  if (typeof window === 'undefined') return
+  localStorage.setItem(STORAGE_KEY_ACCESS, accessToken)
+  localStorage.setItem(STORAGE_KEY_REFRESH, refreshToken)
+}
+
+function clearTokens(): void {
+  if (typeof window === 'undefined') return
+  localStorage.removeItem(STORAGE_KEY_ACCESS)
+  localStorage.removeItem(STORAGE_KEY_REFRESH)
+}
+
+// ==================== API 客户端 ====================
 
 class ApiClient {
   private client: AxiosInstance
   private tenantId: string = 'default'
+  private isRefreshing = false
+  private refreshSubscribers: Array<(token: string) => void> = []
 
   constructor() {
     this.client = axios.create({
@@ -30,17 +118,75 @@ class ApiClient {
       },
     })
 
-    // 请求拦截器：添加租户 ID
+    this.setupInterceptors()
-    this.client.interceptors.request.use((config) => {
+  }
+
+  private setupInterceptors() {
+    // 请求拦截器：添加 Token 和租户 ID
+    this.client.interceptors.request.use((config: InternalAxiosRequestConfig) => {
+      const token = getAccessToken()
+      if (token) {
+        config.headers.Authorization = `Bearer ${token}`
+      }
       config.headers['X-Tenant-ID'] = this.tenantId
       return config
     })
 
-    // 响应拦截器：统一错误处理
+    // 响应拦截器：处理 401 错误
     this.client.interceptors.response.use(
       (response) => response,
-      (error) => {
+      async (error: AxiosError) => {
-        const message = error.response?.data?.detail || error.message || '请求失败'
+        const originalRequest = error.config as InternalAxiosRequestConfig & { _retry?: boolean }
+
+        // 如果是 401 错误且不是刷新 Token 的请求
+        if (error.response?.status === 401 && !originalRequest._retry) {
+          if (this.isRefreshing) {
+            // 如果正在刷新，等待刷新完成后重试
+            return new Promise((resolve) => {
+              this.refreshSubscribers.push((token: string) => {
+                originalRequest.headers.Authorization = `Bearer ${token}`
+                resolve(this.client(originalRequest))
+              })
+            })
+          }
+
+          originalRequest._retry = true
+          this.isRefreshing = true
+
+          try {
+            const refreshToken = getRefreshToken()
+            if (!refreshToken) {
+              throw new Error('No refresh token')
+            }
+
+            const response = await axios.post<RefreshTokenResponse>(
+              `${API_BASE_URL}/api/v1/auth/refresh`,
+              { refresh_token: refreshToken }
+            )
+
+            const newAccessToken = response.data.access_token
+            setTokens(newAccessToken, refreshToken)
+
+            // 通知所有等待的请求
+            this.refreshSubscribers.forEach((callback) => callback(newAccessToken))
+            this.refreshSubscribers = []
+
+            // 重试原请求
+            originalRequest.headers.Authorization = `Bearer ${newAccessToken}`
+            return this.client(originalRequest)
+          } catch (refreshError) {
+            // 刷新失败，清除 Token 并跳转登录
+            clearTokens()
+            if (typeof window !== 'undefined') {
+              window.location.href = '/login'
+            }
+            return Promise.reject(refreshError)
+          } finally {
+            this.isRefreshing = false
+          }
+        }
+
+        const message = (error.response?.data as { detail?: string })?.detail || error.message || '请求失败'
         return Promise.reject(new Error(message))
       }
     )
@@ -50,6 +196,78 @@ class ApiClient {
     this.tenantId = tenantId
   }
 
+  // ==================== 认证 ====================
+
+  /**
+   * 用户注册
+   */
+  async register(data: RegisterRequest): Promise<LoginResponse> {
+    const response = await this.client.post<LoginResponse>('/auth/register', data)
+    setTokens(response.data.access_token, response.data.refresh_token)
+    return response.data
+  }
+
+  /**
+   * 用户登录
+   */
+  async login(data: LoginRequest): Promise<LoginResponse> {
+    const response = await this.client.post<LoginResponse>('/auth/login', data)
+    setTokens(response.data.access_token, response.data.refresh_token)
+    return response.data
+  }
+
+  /**
+   * 退出登录
+   */
+  async logout(): Promise<void> {
+    try {
+      await this.client.post('/auth/logout')
+    } finally {
+      clearTokens()
+    }
+  }
+
+  /**
+   * 刷新 Token
+   */
+  async refreshToken(): Promise<RefreshTokenResponse> {
+    const refreshToken = getRefreshToken()
+    if (!refreshToken) {
+      throw new Error('No refresh token')
+    }
+    const response = await axios.post<RefreshTokenResponse>(
+      `${API_BASE_URL}/api/v1/auth/refresh`,
+      { refresh_token: refreshToken }
+    )
+    setTokens(response.data.access_token, refreshToken)
+    return response.data
+  }
+
+  // ==================== 文件上传 ====================
+
+  /**
+   * 获取 OSS 上传凭证
+   */
+  async getUploadPolicy(fileType: string = 'general'): Promise<UploadPolicyResponse> {
+    const response = await this.client.post<UploadPolicyResponse>('/upload/policy', {
+      file_type: fileType,
+    })
+    return response.data
+  }
+
+  /**
+   * 文件上传完成回调
+   */
+  async fileUploaded(fileKey: string, fileName: string, fileSize: number, fileType: string): Promise<{ url: string }> {
+    const response = await this.client.post<{ url: string }>('/upload/complete', {
+      file_key: fileKey,
+      file_name: fileName,
+      file_size: fileSize,
+      file_type: fileType,
+    })
+    return response.data
+  }
+
   // ==================== 视频审核 ====================
 
   /**
@@ -135,4 +353,7 @@ class ApiClient {
 // 单例导出
 export const api = new ApiClient()
 
+// 导出 Token 管理函数供其他模块使用
+export { getAccessToken, getRefreshToken, setTokens, clearTokens }
+
 export default api

frontend/types/auth.ts

@@ -1,22 +1,39 @@
-'use client'
+/**
+ * 认证相关类型定义
+ * 注意：这些类型应与 @/lib/api 中的类型保持一致
+ */
 
 export type UserRole = 'creator' | 'agency' | 'brand'
 
 export interface User {
   id: string
+  email?: string
+  phone?: string
   name: string
-  email: string
-  role: UserRole
   avatar?: string
-  tenantId: string
+  role: UserRole
-  tenantName: string
+  is_verified: boolean
+  brand_id?: string
+  agency_id?: string
+  creator_id?: string
+  tenant_id?: string
+  tenant_name?: string
 }
 
 export interface LoginCredentials {
-  email: string
+  email?: string
+  phone?: string
   password: string
 }
 
+export interface RegisterData {
+  email?: string
+  phone?: string
+  password: string
+  name: string
+  role: UserRole
+}
+
 export interface AuthState {
   user: User | null
   isAuthenticated: boolean
@@ -25,6 +42,7 @@ export interface AuthState {
 
 export interface AuthContextType extends AuthState {
   login: (credentials: LoginCredentials) => Promise<{ success: boolean; error?: string }>
+  register: (data: RegisterData) => Promise<{ success: boolean; error?: string }>
   logout: () => void
   switchRole: (role: UserRole) => void
 }