Skip to content
Snippets Groups Projects
Commit b262dc54 authored by nahyun's avatar nahyun
Browse files

fix: 로그아웃

parent 4f834124
No related branches found
No related tags found
1 merge request!5Logout
...@@ -62,8 +62,12 @@ function App() { ...@@ -62,8 +62,12 @@ function App() {
}); });
const [lastActivity, setLastActivity] = useState(Date.now()); const [lastActivity, setLastActivity] = useState(Date.now());
const [lastTokenRefresh, setLastTokenRefresh] = useState(Date.now()); const INACTIVITY_TIMEOUT = 60000; // 1분
// 사용자 활동 감지 함수
const updateLastActivity = () => {
setLastActivity(Date.now());
};
// // 토큰 만료 체크 함수 // // 토큰 만료 체크 함수
// const checkTokenExpiration = () => { // const checkTokenExpiration = () => {
...@@ -130,51 +134,95 @@ function App() { ...@@ -130,51 +134,95 @@ function App() {
} }
}; };
// 사용자 활동 감지 // 사용자 활동 감지 - 안되면 다시 활성화
useEffect(() => { // useEffect(() => {
const updateActivity = async (e) => { // const updateActivity = async (e) => {
// input 태그나 textarea에서의 이벤트는 무시 // // input 태그나 textarea에서의 이벤트는 무시
if (e.target.tagName.toLowerCase() === 'input' || // if (e.target.tagName.toLowerCase() === 'input' ||
e.target.tagName.toLowerCase() === 'textarea') { // e.target.tagName.toLowerCase() === 'textarea') {
console.log('입력 필드 이벤트 무시'); // console.log('입력 필드 이벤트 무시');
return; // return;
} // }
const now = Date.now(); // const now = Date.now();
const timeSinceLastRefresh = now - lastTokenRefresh; // const timeSinceLastRefresh = now - lastTokenRefresh;
setLastActivity(now); // setLastActivity(now);
console.log('활동 감지:', { // console.log('활동 감지:', {
현재시간: new Date(now).toLocaleString(), // 현재시간: new Date(now).toLocaleString(),
마지막갱신: new Date(lastTokenRefresh).toLocaleString(), // 마지막갱신: new Date(lastTokenRefresh).toLocaleString(),
경과시간: Math.floor(timeSinceLastRefresh / 1000 / 60) + '' // 경과시간: Math.floor(timeSinceLastRefresh / 1000 / 60) + '분'
}); // });
// 마지막 토큰 갱신으로부터 00분 이상 지났을 때만 갱신 // // 마지막 토큰 갱신으로부터 00분 이상 지났을 때만 갱신
if (timeSinceLastRefresh > (process.env.REACT_APP_TOKEN_EXPIRATION-1) * 60 * 1000) { // if (timeSinceLastRefresh > (process.env.REACT_APP_TOKEN_EXPIRATION-1) * 60 * 1000) {
console.log('토큰 갱신 시도...'); // console.log('토큰 갱신 시도...');
await refreshToken(); // await refreshToken();
} else { // } else {
console.log(`토큰 갱신까지 ${Math.ceil((process.env.REACT_APP_TOKEN_EXPIRATION-1) - timeSinceLastRefresh/1000/60)}분 남음`); // console.log(`토큰 갱신까지 ${Math.ceil((process.env.REACT_APP_TOKEN_EXPIRATION-1) - timeSinceLastRefresh/1000/60)}분 남음`);
// }
// };
// console.log('이벤트 리스너 등록됨');
// window.addEventListener('mousemove', updateActivity);
// window.addEventListener('keydown', updateActivity);
// window.addEventListener('click', updateActivity);
// window.addEventListener('scroll', updateActivity);
// window.addEventListener('touchstart', updateActivity);
// return () => {
// console.log('이벤트 리스너 제거됨');
// window.removeEventListener('mousemove', updateActivity);
// window.removeEventListener('keydown', updateActivity);
// window.removeEventListener('click', updateActivity);
// window.removeEventListener('scroll', updateActivity);
// window.removeEventListener('touchstart', updateActivity);
// };
// }, [lastTokenRefresh]);
//안되면 다시 활성화 -------------
const logout = () => {
localStorage.removeItem('token');
setUser(null);
setIsAuthenticated(false);
};
useEffect(() => {
if (isAuthenticated) {
const checkInactivity = () => {
const inactiveTime = Date.now() - lastActivity;
if (inactiveTime > INACTIVITY_TIMEOUT) {
logout();
toast.info('장시간 활동이 없어 자동 로그아웃되었습니다.');
} }
}; };
console.log('이벤트 리스너 등록됨'); const updateActivity = () => {
setLastActivity(Date.now());
};
// 사용자 활동 감지를 위한 이벤트 리스너
window.addEventListener('mousemove', updateActivity); window.addEventListener('mousemove', updateActivity);
window.addEventListener('keydown', updateActivity); window.addEventListener('keydown', updateActivity);
window.addEventListener('click', updateActivity); window.addEventListener('click', updateActivity);
window.addEventListener('scroll', updateActivity); window.addEventListener('scroll', updateActivity);
window.addEventListener('touchstart', updateActivity); window.addEventListener('touchstart', updateActivity);
// 비활성 상태 체크 인터벌 설정 (5초마다)
const inactivityCheck = setInterval(checkInactivity, 5000);
return () => { return () => {
console.log('이벤트 리스너 제거됨'); // 이벤트 리스너 및 인터벌 정리
window.removeEventListener('mousemove', updateActivity); window.removeEventListener('mousemove', updateActivity);
window.removeEventListener('keydown', updateActivity); window.removeEventListener('keydown', updateActivity);
window.removeEventListener('click', updateActivity); window.removeEventListener('click', updateActivity);
window.removeEventListener('scroll', updateActivity); window.removeEventListener('scroll', updateActivity);
window.removeEventListener('touchstart', updateActivity); window.removeEventListener('touchstart', updateActivity);
clearInterval(inactivityCheck);
}; };
}, [lastTokenRefresh]); }
}, [isAuthenticated, lastActivity, logout]);
// 비활성 시간 체크 // 비활성 시간 체크
useEffect(() => { useEffect(() => {
...@@ -196,11 +244,6 @@ function App() { ...@@ -196,11 +244,6 @@ function App() {
setIsAuthenticated(true); setIsAuthenticated(true);
}; };
const logout = () => {
localStorage.removeItem('token');
setUser(null);
setIsAuthenticated(false);
};
return ( return (
<AuthContext.Provider value={{ isAuthenticated, user, login, logout }}> <AuthContext.Provider value={{ isAuthenticated, user, login, logout }}>
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment