移除移动端API和组件中的冗余代码,简化用户认证逻辑,优化个人页面组件,增强用户体验和代码可维护性。
This commit is contained in:
1133
client/admin/api.ts
1133
client/admin/api.ts
File diff suppressed because it is too large
Load Diff
1139
client/mobile/api.ts
1139
client/mobile/api.ts
File diff suppressed because it is too large
Load Diff
@@ -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();
|
||||
}
|
||||
|
||||
@@ -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 = () => (
|
||||
|
||||
Reference in New Issue
Block a user