Files
carrotskin/src/contexts/AuthContext.tsx
Wuying Created Local Users 5f90f48a1c feat: 完成navbar隐藏优化和侧边栏冻结功能
- 优化navbar滚动隐藏逻辑,更敏感响应
- 添加返回顶部按钮,固定在右下角
- 实现profile页面侧边栏真正冻结效果
- 修复首页滑动指示器位置
- 优化整体布局确保首屏内容完整显示
2025-12-04 20:05:13 +08:00

224 lines
5.8 KiB
TypeScript

'use client';
import React, { createContext, useContext, useState, useEffect, ReactNode } from 'react';
interface User {
id: number;
username: string;
email: string;
avatar?: string;
points: number;
role: string;
status: number;
last_login_at?: string;
created_at: string;
updated_at: string;
totalSkins?: number;
totalDownloads?: number;
}
interface AuthContextType {
user: User | null;
isLoading: boolean;
isAuthenticated: boolean;
login: (username: string, password: string) => Promise<void>;
register: (username: string, email: string, password: string, verificationCode: string) => Promise<void>;
logout: () => void;
updateUser: (userData: Partial<User>) => void;
refreshUser: () => Promise<void>;
}
const API_BASE_URL = 'http://localhost:8080/api/v1';
const AuthContext = createContext<AuthContextType | undefined>(undefined);
export function AuthProvider({ children }: { children: ReactNode }) {
const [user, setUser] = useState<User | null>(null);
const [isLoading, setIsLoading] = useState(true);
// Check if user is logged in on mount
useEffect(() => {
const checkAuthStatus = async () => {
const token = localStorage.getItem('authToken');
if (token) {
await refreshUser();
} else {
setIsLoading(false);
}
};
checkAuthStatus();
}, []);
const setAuthToken = (token: string) => {
localStorage.setItem('authToken', token);
};
const getAuthHeaders = () => {
const token = localStorage.getItem('authToken');
return {
'Content-Type': 'application/json',
'Authorization': token ? `Bearer ${token}` : '',
};
};
const login = async (username: string, password: string) => {
setIsLoading(true);
try {
const response = await fetch(`${API_BASE_URL}/auth/login`, {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({
username,
password,
}),
});
const result = await response.json();
if (result.code === 200) {
const { token, user_info } = result.data;
setAuthToken(token);
const userData: User = {
id: user_info.id,
username: user_info.username,
email: user_info.email,
avatar: user_info.avatar,
points: user_info.points,
role: user_info.role,
status: user_info.status,
last_login_at: user_info.last_login_at,
created_at: user_info.created_at,
updated_at: user_info.updated_at,
};
setUser(userData);
} else {
throw new Error(result.message || '登录失败,请检查用户名和密码');
}
} catch (error) {
throw error instanceof Error ? error : new Error('登录失败,请检查用户名和密码');
} finally {
setIsLoading(false);
}
};
const register = async (username: string, email: string, password: string, verificationCode: string) => {
setIsLoading(true);
try {
const response = await fetch(`${API_BASE_URL}/auth/register`, {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({
username,
email,
password,
verification_code: verificationCode,
}),
});
const result = await response.json();
if (result.code === 200) {
const { token, user_info } = result.data;
setAuthToken(token);
const userData: User = {
id: user_info.id,
username: user_info.username,
email: user_info.email,
avatar: user_info.avatar,
points: user_info.points,
role: user_info.role,
status: user_info.status,
created_at: user_info.created_at,
updated_at: user_info.updated_at,
};
setUser(userData);
} else {
throw new Error(result.message || '注册失败,请稍后重试');
}
} catch (error) {
throw error instanceof Error ? error : new Error('注册失败,请稍后重试');
} finally {
setIsLoading(false);
}
};
const refreshUser = async () => {
try {
const response = await fetch(`${API_BASE_URL}/user/profile`, {
method: 'GET',
headers: getAuthHeaders(),
});
const result = await response.json();
if (result.code === 200) {
const user_info = result.data;
const userData: User = {
id: user_info.id,
username: user_info.username,
email: user_info.email,
avatar: user_info.avatar,
points: user_info.points,
role: user_info.role,
status: user_info.status,
last_login_at: user_info.last_login_at,
created_at: user_info.created_at,
updated_at: user_info.updated_at,
};
setUser(userData);
} else {
// Token invalid or expired
logout();
}
} catch (error) {
console.error('Failed to refresh user:', error);
logout();
} finally {
setIsLoading(false);
}
};
const logout = () => {
setUser(null);
localStorage.removeItem('authToken');
};
const updateUser = (userData: Partial<User>) => {
if (user) {
setUser({ ...user, ...userData });
}
};
const value: AuthContextType = {
user,
isLoading,
isAuthenticated: !!user,
login,
register,
logout,
updateUser,
refreshUser,
};
return <AuthContext.Provider value={value}>{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;
}