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>
184 lines
5.2 KiB
TypeScript
184 lines
5.2 KiB
TypeScript
'use client'
|
|
|
|
import { createContext, useContext, useState, useEffect, ReactNode, useCallback } from 'react'
|
|
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)
|
|
|
|
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',
|
|
is_verified: true,
|
|
creator_id: 'CR123456',
|
|
tenant_id: 'BR001',
|
|
tenant_name: '美妆品牌A',
|
|
password: 'demo123',
|
|
},
|
|
'agency@demo.com': {
|
|
id: 'user-002',
|
|
name: '张经理',
|
|
email: 'agency@demo.com',
|
|
role: 'agency',
|
|
is_verified: true,
|
|
agency_id: 'AG123456',
|
|
tenant_id: 'BR001',
|
|
tenant_name: '美妆品牌A',
|
|
password: 'demo123',
|
|
},
|
|
'brand@demo.com': {
|
|
id: 'user-003',
|
|
name: '李总监',
|
|
email: 'brand@demo.com',
|
|
role: 'brand',
|
|
is_verified: true,
|
|
brand_id: 'BR001',
|
|
tenant_id: 'BR001',
|
|
tenant_name: '美妆品牌A',
|
|
password: 'demo123',
|
|
},
|
|
}
|
|
|
|
export function AuthProvider({ children }: { children: ReactNode }) {
|
|
const [user, setUser] = useState<User | null>(null)
|
|
const [isLoading, setIsLoading] = useState(true)
|
|
|
|
// 初始化时从 localStorage 恢复登录状态
|
|
useEffect(() => {
|
|
if (typeof window !== 'undefined') {
|
|
// 检查是否有 token
|
|
const token = getAccessToken()
|
|
const storedUser = localStorage.getItem(USER_STORAGE_KEY)
|
|
|
|
if (token && storedUser) {
|
|
try {
|
|
const parsed = JSON.parse(storedUser)
|
|
setUser(parsed)
|
|
} catch {
|
|
clearTokens()
|
|
localStorage.removeItem(USER_STORAGE_KEY)
|
|
}
|
|
}
|
|
}
|
|
setIsLoading(false)
|
|
}, [])
|
|
|
|
const login = useCallback(async (credentials: LoginRequest): Promise<{ success: boolean; error?: string }> => {
|
|
try {
|
|
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 }
|
|
}
|
|
|
|
// 真实 API 登录
|
|
const response = await api.login(credentials)
|
|
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 }
|
|
}
|
|
}, [])
|
|
|
|
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 }
|
|
}
|
|
}, [])
|
|
|
|
const logout = useCallback(() => {
|
|
setUser(null)
|
|
clearTokens()
|
|
localStorage.removeItem(USER_STORAGE_KEY)
|
|
}, [])
|
|
|
|
const switchRole = useCallback((role: UserRole) => {
|
|
if (user) {
|
|
const updated = { ...user, role }
|
|
setUser(updated)
|
|
localStorage.setItem(USER_STORAGE_KEY, JSON.stringify(updated))
|
|
}
|
|
}, [user])
|
|
|
|
return (
|
|
<AuthContext.Provider
|
|
value={{
|
|
user,
|
|
isAuthenticated: !!user,
|
|
isLoading,
|
|
login,
|
|
register,
|
|
logout,
|
|
switchRole,
|
|
}}
|
|
>
|
|
{children}
|
|
</AuthContext.Provider>
|
|
)
|
|
}
|
|
|
|
export function useAuth() {
|
|
const context = useContext(AuthContext)
|
|
if (context === undefined) {
|
|
throw new Error('useAuth must be used within an AuthProvider')
|
|
}
|
|
return context
|
|
}
|