移除移动端API和组件中的冗余代码,简化用户认证逻辑,优化个人页面组件,增强用户体验和代码可维护性。

This commit is contained in:
zyh
2025-04-10 06:38:59 +00:00
parent 4a6aa03fff
commit c4905113d7
4 changed files with 65 additions and 2350 deletions

File diff suppressed because it is too large Load Diff

File diff suppressed because it is too large Load Diff

View File

@@ -6,45 +6,6 @@ import type { User, AuthContextType, ThemeContextType, ThemeSettings } from '../
import { ThemeMode, FontSize, CompactMode } from '../share/types.ts';
import { AuthAPI, ThemeAPI } from './api.ts';
// 创建axios实例
const api = axios.create({
baseURL: window.CONFIG?.API_BASE_URL || '/api',
timeout: 10000,
headers: {
'Content-Type': 'application/json',
}
});
// 请求拦截器添加token
api.interceptors.request.use(
(config) => {
const token = getLocalStorageWithExpiry('token');
if (token) {
config.headers['Authorization'] = `Bearer ${token}`;
}
return config;
},
(error) => {
return Promise.reject(error);
}
);
// 响应拦截器处理错误
api.interceptors.response.use(
(response) => {
return response;
},
(error) => {
if (error.response && error.response.status === 401) {
// 清除本地存储并刷新页面
localStorage.removeItem('token');
localStorage.removeItem('user');
window.location.href = '/mobile/login';
}
return Promise.reject(error);
}
);
// 默认主题设置
const defaultThemeSettings: ThemeSettings = {
user_id: 0,
@@ -82,7 +43,7 @@ export const AuthProvider: React.FC<{ children: React.ReactNode }> = ({ children
try {
// 设置请求头
api.defaults.headers.common['Authorization'] = `Bearer ${token}`;
axios.defaults.headers.common['Authorization'] = `Bearer ${token}`;
// 获取当前用户信息
const currentUser = await AuthAPI.getCurrentUser();
setUser(currentUser);
@@ -114,7 +75,7 @@ export const AuthProvider: React.FC<{ children: React.ReactNode }> = ({ children
setLocalStorageWithExpiry('user', user, 24);
// 设置请求头
api.defaults.headers.common['Authorization'] = `Bearer ${token}`;
axios.defaults.headers.common['Authorization'] = `Bearer ${token}`;
} catch (error) {
console.error('登录失败:', error);
@@ -136,7 +97,7 @@ export const AuthProvider: React.FC<{ children: React.ReactNode }> = ({ children
localStorage.removeItem('token');
localStorage.removeItem('user');
// 清除请求头
delete api.defaults.headers.common['Authorization'];
delete axios.defaults.headers.common['Authorization'];
// 清除所有查询缓存
queryClient.clear();
}

View File

@@ -192,45 +192,71 @@ const ErrorPage = () => {
};
// 添加个人页面组件
const ProfilePage = () => (
<div className="p-4">
<h1 className="text-2xl font-bold mb-4"></h1>
<div className="bg-white rounded-lg shadow p-4 mb-4">
<div className="flex items-center mb-4">
<div className="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mr-4">
<span className="text-2xl text-blue-600"></span>
</div>
<div>
<h2 className="text-xl font-semibold"></h2>
<p className="text-gray-500"></p>
const ProfilePage = () => {
const { logout, user } = useAuth();
const navigate = useNavigate();
const handleLogout = async () => {
if (confirm('确定要退出登录吗?')) {
await logout();
navigate('/mobile/login');
}
};
return (
<div className="p-4">
<h1 className="text-2xl font-bold mb-4"></h1>
<div className="bg-white rounded-lg shadow p-4 mb-4">
<div className="flex items-center mb-4">
<div className="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mr-4">
{user?.avatar ? (
<img
src={user.avatar}
alt={user?.nickname || user?.username || '用户'}
className="w-16 h-16 rounded-full object-cover"
/>
) : (
<span className="text-2xl text-blue-600"></span>
)}
</div>
<div>
<h2 className="text-xl font-semibold">{user?.nickname || user?.username || '未登录用户'}</h2>
<p className="text-gray-500"></p>
</div>
</div>
</div>
<div className="bg-white rounded-lg shadow mb-4">
<div className="p-4 border-b">
<span className="font-medium"></span>
</div>
<div className="divide-y">
<div className="p-4 flex justify-between items-center">
<span></span>
<span className="text-gray-400"></span>
</div>
<div className="p-4 flex justify-between items-center">
<span></span>
<span className="text-gray-400"></span>
</div>
<div className="p-4 flex justify-between items-center">
<span></span>
<span className="text-gray-400"></span>
</div>
<div className="p-4 flex justify-between items-center">
<span></span>
<span className="text-gray-400"></span>
</div>
</div>
</div>
<button
onClick={handleLogout}
className="w-full py-3 bg-red-600 text-white rounded-lg hover:bg-red-700 transition-colors"
>
退
</button>
</div>
<div className="bg-white rounded-lg shadow">
<div className="p-4 border-b">
<span className="font-medium"></span>
</div>
<div className="divide-y">
<div className="p-4 flex justify-between items-center">
<span></span>
<span className="text-gray-400"></span>
</div>
<div className="p-4 flex justify-between items-center">
<span></span>
<span className="text-gray-400"></span>
</div>
<div className="p-4 flex justify-between items-center">
<span></span>
<span className="text-gray-400"></span>
</div>
<div className="p-4 flex justify-between items-center">
<span></span>
<span className="text-gray-400"></span>
</div>
</div>
</div>
</div>
);
);
};
// 添加通知页面组件
const NotificationsPage = () => (