cavin/smart-crop-ui
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

生产管理系统 - 2种角色的登录

Browse Source
This commit is contained in:
peng
2025-10-31 14:52:30 +08:00
parent 46ff61eaed
commit ad600ce059
7 changed files with 371 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
crop-x/src/app/(auth)/login/components/LoginForm.tsx
View File

@@ -28,7 +28,7 @@ import {
import { toast } from 'sonner'; import { toast } from 'sonner';
import { useAuth } from '@/components/auth/AuthContext'; import { useAuth } from '@/components/auth/AuthContext';
import { authReducer, initialAuthState, AuthState, AuthAction } from './authReducer'; import { authReducer, initialAuthState, AuthState, AuthAction } from './authReducer';
import { loginApiV1AuthLoginPost } from '@/lib/api/sdk.gen'; import { getCaptchaApiV1AuthCaptchaGet, loginApiV1AuthLoginPost } from '@/lib/api/sdk.gen';
import type { CaptchaResponse } from '@/lib/api/types.gen'; import type { CaptchaResponse } from '@/lib/api/types.gen';
interface LoginFormProps { interface LoginFormProps {
@@ -128,6 +128,8 @@ export function LoginForm({ onRegisterClick }: LoginFormProps) {
enterpriseId: response.data.enterprise_id || '', enterpriseId: response.data.enterprise_id || '',
enterpriseName: response.data.enterprise_name || '', enterpriseName: response.data.enterprise_name || '',
createdAt: response.data.created_at || new Date().toISOString(), createdAt: response.data.created_at || new Date().toISOString(),
// 重要：存储token到用户对象中
token: response.data.access_token || response.data.token || null,
}; };
// 打印登录成功日志 // 打印登录成功日志
@@ -137,10 +139,20 @@ export function LoginForm({ onRegisterClick }: LoginFormProps) {
timestamp: new Date().toISOString() timestamp: new Date().toISOString()
}); });
// 验证token是否正确存储
if (userData.token) {
console.log('🔑 Token已存储:', userData.token.substring(0, 20) + '...');
} else {
console.warn('⚠️ 未找到token，请检查API响应格式');
}
login(userData); login(userData);
toast.success('登录成功！'); toast.success('登录成功！正在跳转...');
// 暂时不实现页面跳转
console.log('✅ 登录流程完成，等待后续页面跳转实现'); // 跳转到个人中心页面
setTimeout(() => {
window.location.href = '/central-config/personal-center/personal-info';
}, 1000);
} else { } else {
dispatch({ type: 'SET_ERROR', payload: '登录失败，请检查用户名和密码' }); dispatch({ type: 'SET_ERROR', payload: '登录失败，请检查用户名和密码' });
toast.error('登录失败，请检查用户名和密码'); toast.error('登录失败，请检查用户名和密码');

18
crop-x/src/app/layout.tsx
View File

@@ -1,12 +1,24 @@
'use client';
import { useEffect } from 'react';
import { AuthProvider } from '@/components/auth/AuthContext';
export default function AppLayout({ export default function AppLayout({
children, children,
}: { }: {
children: React.ReactNode children: React.ReactNode
}) { }) {
// 使用useEffect确保主题只在客户端设置，避免水合问题
useEffect(() => {
// 可以在这里添加客户端特定的初始化逻辑
}, []);
return ( return (
<html lang="en"> <html lang="en" suppressHydrationWarning>
<body> <body suppressHydrationWarning>
{children} <AuthProvider>
{children}
</AuthProvider>
</body> </body>
</html> </html>
) )

31
crop-x/src/app/page.tsx
View File

@@ -1,12 +1,25 @@
export default function HomePage({ 'use client';
children,
}: { import { useAuth } from '@/components/auth/AuthContext';
children: React.ReactNode import { LoadingScreen } from '@/components/auth/LoadingScreen';
}) { import { redirect } from 'next/navigation';
export default function HomePage() {
const { user, loading, isAuthenticated } = useAuth();
// 如果正在加载，显示加载屏幕
if (loading) {
return <LoadingScreen />;
}
console.log('isAuthenticated:',isAuthenticated)
// 如果未认证，重定向到登录页
if (!isAuthenticated) {
redirect('/login');
}
// 用户已认证，显示主页内容
return ( return (
<div className=""> <div></div>
{children} );
</div>
)
} }

60
crop-x/src/components/auth/AuthContext.tsx
View File

@@ -1,6 +1,7 @@
'use client'; 'use client';
import React, { createContext, useContext, useState, ReactNode } from 'react'; import React, { createContext, useContext, useState, ReactNode } from 'react';
import { getCurrentUserInfoApiV1AuthMeGet } from '@/lib/api/sdk.gen';
interface User { interface User {
id: string; id: string;
@@ -9,6 +10,7 @@ interface User {
email?: string; email?: string;
phone?: string; phone?: string;
enterpriseId?: string; enterpriseId?: string;
token?: string;
} }
interface AuthContextType { interface AuthContextType {
@@ -16,6 +18,8 @@ interface AuthContextType {
login: (user: User) => void; login: (user: User) => void;
logout: () => void; logout: () => void;
isAuthenticated: boolean; isAuthenticated: boolean;
loading: boolean;
validateUser: () => Promise<void>;
} }
const AuthContext = createContext<AuthContextType | undefined>(undefined); const AuthContext = createContext<AuthContextType | undefined>(undefined);
@@ -26,29 +30,65 @@ interface AuthProviderProps {
export function AuthProvider({ children }: AuthProviderProps) { export function AuthProvider({ children }: AuthProviderProps) {
const [user, setUser] = useState<User | null>(null); const [user, setUser] = useState<User | null>(null);
const [loading, setLoading] = useState(true);
const login = (userData: User) => { const login = (userData: User) => {
setUser(userData); setUser(userData);
// 存储到 localStorage // 存储到 localStorage
localStorage.setItem('user', JSON.stringify(userData)); localStorage.setItem('user', JSON.stringify(userData));
setLoading(false);
}; };
const logout = () => { const logout = () => {
setUser(null); setUser(null);
localStorage.removeItem('user'); localStorage.removeItem('user');
setLoading(false);
}; };
// 初始化时检查 localStorage // 验证当前用户信息
React.useEffect(() => { const validateUser = async () => {
const storedUser = localStorage.getItem('user'); try {
if (storedUser) { const storedUser = localStorage.getItem('user');
try { if (!storedUser) {
setUser(JSON.parse(storedUser)); setLoading(false);
} catch (error) { return;
console.error('Failed to parse stored user data:', error);
localStorage.removeItem('user');
} }
const userData = JSON.parse(storedUser);
// 使用 SDK 调用 /api/v1/auth/me 验证用户信息
const response = await getCurrentUserInfoApiV1AuthMeGet({
headers: {
'Authorization': `Bearer ${userData.token}`,
},
});
if (response.data) {
// 更新用户信息（可能包含最新的权限、角色等）
setUser({
...userData,
...response.data.data, // 合并最新的用户信息
});
console.log('✅ 用户验证成功，最新用户信息:', response.data.data);
} else {
// Token无效，清除用户信息
console.warn('⚠️ Token验证失败，清除用户信息');
localStorage.removeItem('user');
setUser(null);
}
} catch (error: any) {
console.error('❌ 用户验证失败:', error);
// 验证失败时也清除用户信息，避免不一致状态
localStorage.removeItem('user');
setUser(null);
} finally {
setLoading(false);
} }
};
// 初始化时检查 localStorage并验证用户
React.useEffect(() => {
validateUser();
}, []); }, []);
const value: AuthContextType = { const value: AuthContextType = {
@@ -56,6 +96,8 @@ export function AuthProvider({ children }: AuthProviderProps) {
login, login,
logout, logout,
isAuthenticated: !!user, isAuthenticated: !!user,
loading,
validateUser, // 暴露验证方法供手动刷新使用
}; };
return <AuthContext.Provider value={value}>{children}</AuthContext.Provider>; return <AuthContext.Provider value={value}>{children}</AuthContext.Provider>;

32
crop-x/src/components/auth/LoadingScreen.tsx Normal file
View File

@@ -0,0 +1,32 @@
'use client';
import React from 'react';
import { Loader2 } from 'lucide-react';
interface LoadingScreenProps {
message?: string;
}
export function LoadingScreen({ message = '正在验证用户身份...' }: LoadingScreenProps) {
return (
<div className="min-h-screen flex items-center justify-center bg-gray-50">
<div className="text-center">
<div className="inline-flex items-center justify-center w-16 h-16 bg-green-100 rounded-full mb-4">
<Loader2 className="w-8 h-8 text-green-600 animate-spin" />
</div>
<h2 className="text-xl font-semibold text-gray-900 mb-2">智慧农业生产管理系统</h2>
<p className="text-gray-600">{message}</p>
{/* 加载进度条 */}
<div className="mt-6 w-64 h-2 bg-gray-200 rounded-full overflow-hidden">
<div className="h-full bg-green-600 rounded-full animate-pulse" style={{ width: '60%' }}></div>
</div>
{/* 提示信息 */}
<div className="mt-8 text-sm text-gray-500 max-w-md">
<p>正在验证您的身份信息，请稍候...</p>
</div>
</div>
</div>
);
}

127
crop-x/src/lib/api/README.md Normal file
View File

@@ -0,0 +1,127 @@
# API SDK 使用指南
## 🚀 概述
本项目提供了两种API调用方式：
1. **原始SDK** (`sdk.gen.ts`) - 直接API调用，无认证
2. **认证SDK** (`authenticated-sdk.ts`) - 自动添加Token的API调用
## 📝 使用方法
### 1. 无认证的API调用（如登录、获取验证码）
```typescript
import { api } from '@/lib/api/authenticated-sdk';
// 获取验证码 - 不需要token
const captchaResponse = await api.getCaptcha();
// 用户登录 - 不需要token
const loginResponse = await api.login({
body: {
identifier: 'admin',
password: 'password123',
captcha_id: 'captcha-id',
captcha_text: 'ABCD'
}
});
```
### 2. 需要认证的API调用
```typescript
import { authenticatedSdk } from '@/lib/api/authenticated-sdk';
// 获取当前用户信息 - 自动添加token
const userResponse = await authenticatedSdk.getCurrentUser();
// 获取用户列表 - 自动添加token
const usersResponse = await authenticatedSdk.getUsers({
query: { page: 1, size: 10 }
});
// 创建用户 - 自动添加token
const createResponse = await authenticatedSdk.createUser({
body: {
username: 'newuser',
email: 'user@example.com'
}
});
```
## 🔧 核心特性
### 自动Token管理
- 自动从localStorage获取token
- 自动添加到请求头 `Authorization: Bearer {token}`
- 请求日志记录
### 401错误处理
- 检测401响应自动清除本地认证信息
- 自动跳转到登录页面
### 类型安全
- 完整的TypeScript类型支持
- 智能代码提示
## 📋 API方法列表
### 认证相关
- `api.getCaptcha()` - 获取验证码
- `api.login(options)` - 用户登录
- `api.logout(options)` - 用户登出
- `authenticatedSdk.getCurrentUser()` - 获取当前用户
- `authenticatedSdk.refreshToken()` - 刷新token
### 用户管理
- `authenticatedSdk.getUsers()` - 获取用户列表
- `authenticatedSdk.getUser(options)` - 获取单个用户
- `authenticatedSdk.createUser(options)` - 创建用户
- `authenticatedSdk.updateUser(options)` - 更新用户
- `authenticatedSdk.deleteUser(options)` - 删除用户
### 部门管理
- `authenticatedSdk.getDepartments()` - 获取部门列表
- `authenticatedSdk.getDepartment(options)` - 获取单个部门
- `authenticatedSdk.createDepartment(options)` - 创建部门
- `authenticatedSdk.updateDepartment(options)` - 更新部门
- `authenticatedSdk.deleteDepartment(options)` - 删除部门
### 租户管理
- `authenticatedSdk.getTenants()` - 获取租户列表
- `authenticatedSdk.getTenant(options)` - 获取单个租户
- `authenticatedSdk.getCurrentTenant()` - 获取当前租户信息
## ⚠️ 重要说明
1. **API生成覆盖**: `sdk.gen.ts` 和 `client.gen.ts` 会被 `npm run api:generate` 覆盖
2. **安全文件**: `authenticated-sdk.ts` 不会被覆盖，可安全使用
3. **Token存储**: Token存储在localStorage的user对象中
4. **代理配置**: 所有请求通过Next.js代理到真实API地址
## 🔄 迁移指南
### 从原始SDK迁移到认证SDK
```typescript
// ❌ 旧方式 - 可能缺少认证
import { getUsersApiV1UsersGet } from '@/lib/api/sdk.gen';
const response = await getUsersApiV1UsersGet();
// ✅ 新方式 - 自动添加认证
import { authenticatedSdk } from '@/lib/api/authenticated-sdk';
const response = await authenticatedSdk.getUsers();
```
### 混合使用场景
```typescript
import { api, authenticatedSdk } from '@/lib/api/authenticated-sdk';
// 登录 - 不需要认证
const loginResponse = await api.login({ body: loginData });
// 登录成功后，获取用户信息 - 需要认证
const userInfo = await authenticatedSdk.getCurrentUser();
```

108
crop-x/src/lib/api/authenticated-sdk.ts Normal file
View File

@@ -0,0 +1,108 @@
/**
* 认证API SDK包装器
* 为所有API调用自动添加Token，不会被API生成工具覆盖
*/
import { client } from './client.gen';
import * as api from './sdk.gen';
import type { Options } from './sdk.gen';
// 获取存储的token
const getAuthToken = (): string | null => {
try {
const storedUser = localStorage.getItem('user');
const user = storedUser ? JSON.parse(storedUser) : null;
return user?.token || null;
} catch (error) {
console.error('获取token失败:', error);
return null;
}
};
// 创建带认证的客户端选项
const createAuthenticatedOptions = <TData = any, ThrowOnError extends boolean = false>(
originalOptions: Options<TData, ThrowOnError> = {} as Options<TData, ThrowOnError>
): Options<TData, ThrowOnError> => {
const token = getAuthToken();
const authenticatedOptions: Options<TData, ThrowOnError> = {
...originalOptions,
client: client
};
// 如果有token，添加到请求头
if (token) {
authenticatedOptions.headers = {
...originalOptions.headers,
Authorization: `Bearer ${token}`
};
console.log('🔑 为API请求添加Token:', (originalOptions as any).url || 'unknown endpoint');
} else {
console.log('🚫 无Token，API请求可能未授权:', (originalOptions as any).url || 'unknown endpoint');
}
return authenticatedOptions;
};
// 包装所有API方法，自动添加认证
export const authenticatedSdk = {
// 认证相关
getCaptcha: (options?: Options) => api.getCaptchaApiV1AuthCaptchaGet(options),
login: (options: Options) => api.loginApiV1AuthLoginPost(options),
logout: (options?: Options) => api.logoutApiV1AuthLogoutPost(createAuthenticatedOptions(options)),
getCurrentUser: (options?: Options) => api.getCurrentUserInfoApiV1AuthMeGet(createAuthenticatedOptions(options)),
refreshToken: (options?: Options) => api.refreshTokenApiV1AuthRefreshPost(createAuthenticatedOptions(options)),
// 用户管理
getUsers: (options?: Options) => api.getUsersApiV1UsersGet(createAuthenticatedOptions(options)),
getUser: (options: Options) => api.getUserApiV1UsersUserIdGet(createAuthenticatedOptions(options)),
createUser: (options: Options) => api.createUserApiV1UsersPost(createAuthenticatedOptions(options)),
updateUser: (options: Options) => api.updateUserApiV1UsersUserIdPut(createAuthenticatedOptions(options)),
deleteUser: (options: Options) => api.deleteUserApiV1UsersUserIdDelete(createAuthenticatedOptions(options)),
// 系统用户管理
getSystemUsers: (options?: Options) => api.listSystemUsersApiV1UsersSystemUsersGet(createAuthenticatedOptions(options)),
getSystemUser: (options: Options) => api.getSystemUserApiV1UsersSystemUsersUserIdGet(createAuthenticatedOptions(options)),
createSystemUser: (options: Options) => api.createSystemUserApiV1UsersSystemUsersPost(createAuthenticatedOptions(options)),
updateSystemUser: (options: Options) => api.updateSystemUserApiV1UsersSystemUsersUserIdPut(createAuthenticatedOptions(options)),
deleteSystemUser: (options: Options) => api.deleteSystemUserApiV1UsersSystemUsersUserIdDelete(createAuthenticatedOptions(options)),
// 部门管理
getDepartments: (options?: Options) => api.getDepartmentsApiV1DepartmentsDepartmentsGet(createAuthenticatedOptions(options)),
getDepartment: (options: Options) => api.getDepartmentApiV1DepartmentsDepartmentsDepartmentIdGet(createAuthenticatedOptions(options)),
createDepartment: (options: Options) => api.createDepartmentApiV1DepartmentsDepartmentsPost(createAuthenticatedOptions(options)),
updateDepartment: (options: Options) => api.updateDepartmentApiV1DepartmentsDepartmentsDepartmentIdPut(createAuthenticatedOptions(options)),
deleteDepartment: (options: Options) => api.deleteDepartmentApiV1DepartmentsDepartmentsDepartmentIdDelete(createAuthenticatedOptions(options)),
getDepartmentTree: (options?: Options) => api.getDepartmentTreeApiV1DepartmentsDepartmentsTreeGet(createAuthenticatedOptions(options)),
// 租户管理
getTenants: (options?: Options) => api.listTenantsApiV1TenantsGet(createAuthenticatedOptions(options)),
getTenant: (options: Options) => api.getTenantApiV1TenantsTenantIdGet(createAuthenticatedOptions(options)),
createTenant: (options: Options) => api.createTenantApiV1TenantsPost(createAuthenticatedOptions(options)),
updateTenant: (options: Options) => api.updateTenantApiV1TenantsTenantIdPut(createAuthenticatedOptions(options)),
deleteTenant: (options: Options) => api.deleteTenantApiV1TenantsTenantIdDelete(createAuthenticatedOptions(options)),
getCurrentTenant: (options?: Options) => api.getCurrentTenantApiV1TenantsMeGet(createAuthenticatedOptions(options)),
// 消息管理
sendMessage: (options: Options) => api.sendMessageApiV1MessagesSendPost(createAuthenticatedOptions(options)),
scheduleMessage: (options: Options) => api.scheduleMessageApiV1MessagesSchedulePost(createAuthenticatedOptions(options)),
getMessageLogs: (options?: Options) => api.listMessageLogsApiV1MessagesLogsMessageLogsGet(createAuthenticatedOptions(options)),
getMessageReceipts: (options: Options) => api.getMessageReceiptsApiV1MessagesLogsMessageLogsMessageIdReceiptsGet(createAuthenticatedOptions(options)),
// 系统信息
getSystemInfo: (options?: Options) => api.getSystemInfoApiV1SystemInfoGet(createAuthenticatedOptions(options)),
getSystemStats: (options?: Options) => api.getSystemStatsApiV1SystemStatsGet(createAuthenticatedOptions(options)),
getSystemMetrics: (options?: Options) => api.getSystemMetricsApiV1SystemMetricsGet(createAuthenticatedOptions(options)),
healthCheck: (options?: Options) => api.healthCheckApiV1HealthGet(createAuthenticatedOptions(options)),
// 日志管理
getLoginLogs: (options?: Options) => api.getLoginLogsApiV1LogsLogsLoginGet(createAuthenticatedOptions(options)),
getOperationLogs: (options?: Options) => api.getOperationLogsApiV1LogsLogsOperationGet(createAuthenticatedOptions(options)),
getNetworkLogs: (options?: Options) => api.getNetworkLogsApiV1LogsLogsNetworkGet(createAuthenticatedOptions(options)),
};
// 导出原始API以供特殊情况使用（如登录）
export { api };
// 导出类型
export type { Options };