feat: 登陆注册UI调整,用户协议和隐私政策跳转调整
This commit is contained in:
@@ -455,15 +455,14 @@ export const AuthProvider = ({ children }) => {
|
||||
isClosable: true,
|
||||
});
|
||||
|
||||
// 跳转到登录页面
|
||||
navigate('/auth/signin');
|
||||
// 不再跳转,用户留在当前页面
|
||||
|
||||
} catch (error) {
|
||||
console.error('Logout error:', error);
|
||||
// 即使API调用失败也清除本地状态
|
||||
setUser(null);
|
||||
setIsAuthenticated(false);
|
||||
navigate('/auth/signin');
|
||||
// 不再跳转,用户留在当前页面
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
100
src/contexts/AuthModalContext.js
Normal file
100
src/contexts/AuthModalContext.js
Normal file
@@ -0,0 +1,100 @@
|
||||
// src/contexts/AuthModalContext.js
|
||||
import { createContext, useContext, useState, useCallback } from 'react';
|
||||
|
||||
const AuthModalContext = createContext();
|
||||
|
||||
/**
|
||||
* 自定义Hook:获取弹窗上下文
|
||||
*/
|
||||
export const useAuthModal = () => {
|
||||
const context = useContext(AuthModalContext);
|
||||
if (!context) {
|
||||
throw new Error('useAuthModal must be used within AuthModalProvider');
|
||||
}
|
||||
return context;
|
||||
};
|
||||
|
||||
/**
|
||||
* 认证弹窗提供者组件
|
||||
* 管理统一的认证弹窗状态(登录/注册合并)
|
||||
*/
|
||||
export const AuthModalProvider = ({ children }) => {
|
||||
// 弹窗状态(统一的认证弹窗)
|
||||
const [isAuthModalOpen, setIsAuthModalOpen] = useState(false);
|
||||
|
||||
// 重定向URL(认证成功后跳转)
|
||||
const [redirectUrl, setRedirectUrl] = useState(null);
|
||||
|
||||
// 成功回调函数
|
||||
const [onSuccessCallback, setOnSuccessCallback] = useState(null);
|
||||
|
||||
/**
|
||||
* 打开认证弹窗(统一的登录/注册入口)
|
||||
* @param {string} url - 认证成功后的重定向URL(可选)
|
||||
* @param {function} callback - 认证成功后的回调函数(可选)
|
||||
*/
|
||||
const openAuthModal = useCallback((url = null, callback = null) => {
|
||||
setRedirectUrl(url);
|
||||
setOnSuccessCallback(() => callback);
|
||||
setIsAuthModalOpen(true);
|
||||
}, []);
|
||||
|
||||
/**
|
||||
* 关闭认证弹窗
|
||||
*/
|
||||
const closeModal = useCallback(() => {
|
||||
setIsAuthModalOpen(false);
|
||||
setRedirectUrl(null);
|
||||
setOnSuccessCallback(null);
|
||||
}, []);
|
||||
|
||||
/**
|
||||
* 登录/注册成功处理
|
||||
* @param {object} user - 用户信息
|
||||
*/
|
||||
const handleLoginSuccess = useCallback((user) => {
|
||||
// 执行自定义回调(如果有)
|
||||
if (onSuccessCallback) {
|
||||
try {
|
||||
onSuccessCallback(user);
|
||||
} catch (error) {
|
||||
console.error('Success callback error:', error);
|
||||
}
|
||||
}
|
||||
|
||||
// 如果有重定向URL,则跳转
|
||||
if (redirectUrl) {
|
||||
// 使用 window.location.href 确保完整刷新页面状态
|
||||
setTimeout(() => {
|
||||
window.location.href = redirectUrl;
|
||||
}, 500); // 延迟500ms,让用户看到成功提示
|
||||
}
|
||||
|
||||
// 关闭弹窗
|
||||
closeModal();
|
||||
}, [onSuccessCallback, redirectUrl, closeModal]);
|
||||
|
||||
/**
|
||||
* 提供给子组件的上下文值
|
||||
*/
|
||||
const value = {
|
||||
// 状态
|
||||
isAuthModalOpen,
|
||||
redirectUrl,
|
||||
|
||||
// 打开弹窗方法
|
||||
openAuthModal,
|
||||
|
||||
// 关闭弹窗方法
|
||||
closeModal,
|
||||
|
||||
// 成功处理方法
|
||||
handleLoginSuccess,
|
||||
};
|
||||
|
||||
return (
|
||||
<AuthModalContext.Provider value={value}>
|
||||
{children}
|
||||
</AuthModalContext.Provider>
|
||||
);
|
||||
};
|
||||
Reference in New Issue
Block a user