diff --git a/src/components/AuthGuard.tsx b/src/components/AuthGuard.tsx index 8fd34f1..34ef344 100644 --- a/src/components/AuthGuard.tsx +++ b/src/components/AuthGuard.tsx @@ -11,8 +11,8 @@ const AuthGuard: React.FC = ({ children }) => { const navigate = useNavigate(); // 直接从localStorage检查token,避免React状态更新的延迟 - const token = localStorage.getItem('token'); - const isAuthenticated = !!token; + const authorization = localStorage.getItem('Authorization'); + const isAuthenticated = !!authorization; const isLoginPage = location.pathname === '/login'; useEffect(() => { diff --git a/src/hooks/login_hooks.ts b/src/hooks/login_hooks.ts index 8ad2126..146df28 100644 --- a/src/hooks/login_hooks.ts +++ b/src/hooks/login_hooks.ts @@ -11,7 +11,7 @@ import { rsaPsw } from '../utils/encryption'; export const useOAuthCallback = () => { const [searchParams, setSearchParams] = useSearchParams(); const navigate = useNavigate(); - + const error = searchParams.get('error'); const newSearchParams: URLSearchParams = useMemo( () => new URLSearchParams(searchParams.toString()), @@ -33,7 +33,7 @@ export const useOAuthCallback = () => { const auth = searchParams.get('auth'); if (auth) { // 存储认证信息 - localStorage.setItem('token', auth); + localStorage.setItem('Authorization', auth); newSearchParams.delete('auth'); setSearchParams(newSearchParams); navigate('/'); @@ -56,36 +56,40 @@ export const useAuth = () => { const navigate = useNavigate(); const location = useLocation(); const [searchParams] = useSearchParams(); - const [isAuthenticated, setIsAuthenticated] = useState(null); const [userInfo, setUserInfo] = useState(null); const [token, setToken] = useState(null); + const [authorization, setAuthorization] = useState(null); + const [isLoading, setIsLoading] = useState(true); // OAuth回调处理 const auth = useOAuthCallback(); + const isAuthenticated = useMemo(() => authorization !== null && authorization !== '', [authorization]); + // 检查认证状态 const checkAuthStatus = () => { try { const storedToken = localStorage.getItem('token'); + const storedAuthorization = localStorage.getItem('Authorization'); const storedUserInfo = localStorage.getItem('userInfo'); - - if (storedToken) { + + if (storedAuthorization) { setToken(storedToken); - setIsAuthenticated(true); - + setAuthorization(storedAuthorization); + if (storedUserInfo) { setUserInfo(JSON.parse(storedUserInfo)); } } else { setToken(null); - setIsAuthenticated(false); + setAuthorization(null); setUserInfo(null); } } catch (error) { console.error('Error checking auth status:', error); setToken(null); - setIsAuthenticated(false); + setAuthorization(null); setUserInfo(null); } finally { setIsLoading(false); @@ -97,16 +101,19 @@ export const useAuth = () => { localStorage.removeItem('token'); localStorage.removeItem('userInfo'); setToken(null); - setIsAuthenticated(false); setUserInfo(null); navigate('/login'); }; + const updateAuthorization = (newAuthorization: string) => { + setAuthorization(newAuthorization); + localStorage.setItem('Authorization', newAuthorization); + }; + // 更新认证状态 const updateAuthStatus = (newToken: string, newUserInfo: any) => { setToken(newToken); setUserInfo(newUserInfo); - setIsAuthenticated(true); localStorage.setItem('token', newToken); localStorage.setItem('userInfo', JSON.stringify(newUserInfo)); }; @@ -142,6 +149,7 @@ export const useAuth = () => { isLoading, checkAuthStatus, logout, + updateAuthorization, updateAuthStatus, redirectToLogin, redirectAfterLogin, @@ -171,33 +179,37 @@ export const useLogin = () => { const login = async (data: LoginFormData) => { setIsLoading(true); - + try { // RSA加密密码 const encryptedPassword = rsaPsw(data.password); - const response = await userService.login({ - email: data.email.trim(), - password: encryptedPassword + const response = await userService.login({ + email: data.email.trim(), + password: encryptedPassword }); - const { data: res = {} } = response; + const { data: res = {}, headers } = response; + + const authorization: string = headers['authorization'] ?? headers['Authorization'] ?? ''; + + localStorage.setItem('Authorization', authorization); const { code, message } = res; if (code === 0) { // 登录成功,处理token和用户信息 const { data: userData } = res; - const token = userData.access_token; + const token: string = userData.access_token; const userInfo = { ...userData, avatar: userData.avatar, name: userData.nickname, email: userData.email, }; - + // 同步更新localStorage localStorage.setItem('token', token); localStorage.setItem('userInfo', JSON.stringify(userInfo)); - + // 直接进行重定向,不依赖React状态更新 const redirectUrl = searchParams.get('redirect'); if (redirectUrl) { @@ -205,20 +217,20 @@ export const useLogin = () => { } else { navigate('/', { replace: true }); } - + return { success: true }; } else { // 登录失败 - return { - success: false, - error: message || t('login.loginFailed') + return { + success: false, + error: message || t('login.loginFailed') }; } } catch (error: any) { // 处理网络错误或其他异常 - return { - success: false, - error: error.message || t('login.networkError') + return { + success: false, + error: error.message || t('login.networkError') }; } finally { setIsLoading(false); @@ -237,11 +249,11 @@ export const useRegister = () => { const register = async (data: RegisterFormData) => { setIsLoading(true); - + try { // RSA加密密码 const encryptedPassword = rsaPsw(data.password); - + const response = await userService.register({ nickname: data.nickname, email: data.email.trim(), @@ -250,25 +262,25 @@ export const useRegister = () => { const { data: res = {} } = response; const { code, message } = res; - + if (code === 0) { // 注册成功 - return { - success: true, - email: data.email + return { + success: true, + email: data.email }; } else { // 注册失败 - return { - success: false, - error: message || t('login.registerFailed') + return { + success: false, + error: message || t('login.registerFailed') }; } } catch (error: any) { // 处理网络错误或其他异常 - return { - success: false, - error: error.message || t('login.networkError') + return { + success: false, + error: error.message || t('login.networkError') }; } finally { setIsLoading(false); @@ -335,23 +347,23 @@ export const useLoginForm = () => { error, loginForm, registerForm, - + // 表单操作 handleTabChange, switchToLogin, setFormError, clearError, - + // 表单验证规则 loginValidation: { - email: { + email: { required: t('login.emailPlaceholder'), pattern: { value: /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i, message: t('login.emailInvalid') } }, - password: { + password: { required: t('login.passwordPlaceholder'), minLength: { value: 6, @@ -360,21 +372,21 @@ export const useLoginForm = () => { } }, registerValidation: { - nickname: { + nickname: { required: t('login.nicknamePlaceholder'), minLength: { value: 2, message: t('login.nicknameMinLength') } }, - email: { + email: { required: t('login.emailPlaceholder'), pattern: { value: /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i, message: t('login.emailInvalid') } }, - password: { + password: { required: t('login.passwordPlaceholder'), minLength: { value: 8, @@ -396,18 +408,18 @@ export const useLoginPage = () => { const handleLogin = async (data: LoginFormData) => { formHook.clearError(); const result = await loginHook.login(data); - + if (!result.success && result.error) { formHook.setFormError(result.error); } - + return result; }; const handleRegister = async (data: RegisterFormData) => { formHook.clearError(); const result = await registerHook.register(data); - + if (result.success) { // 注册成功,切换到登录表单并填入邮箱 formHook.registerForm.reset(); @@ -415,7 +427,7 @@ export const useLoginPage = () => { } else if (result.error) { formHook.setFormError(result.error); } - + return result; }; @@ -424,7 +436,7 @@ export const useLoginPage = () => { return { // 表单相关 ...formHook, - + // 提交处理 handleLogin, handleRegister, diff --git a/src/utils/request.ts b/src/utils/request.ts index 5c57c42..119968f 100644 --- a/src/utils/request.ts +++ b/src/utils/request.ts @@ -47,12 +47,12 @@ export type ResultCode = // 获取授权token const getAuthorization = (): string => { - return localStorage.getItem('token') || ''; + return localStorage.getItem(Authorization) || ''; }; // 重定向到登录页 const redirectToLogin = (): void => { - localStorage.removeItem('token'); + localStorage.removeItem(Authorization); window.location.href = '/login'; }; @@ -94,9 +94,9 @@ request.interceptors.request.use( } // 添加授权头 - const token = getAuthorization(); - if (token && !config.headers?.skipToken) { - config.headers[Authorization] = token; + const authorization = getAuthorization(); + if (authorization && !config.headers?.skipToken) { + config.headers.Authorization = authorization; } return config;