🔨 fix: 로그인 만료 로직 변경

[rkdcodus]

✅ 체크리스트

• 5초마다 memberId 요청 대신 로그인 만료 타이머 구현하기

📝 작업 상세 내용

기존 코드는 memberId를 가져오는 useQuery를 5초마다 호출해서 로그인이 만료되었는지 확인했었습니다.
setInterval 함수로 로그인 만료 타이머를 구현해 불필요한 api 요청을 줄이면서 로그인이 만료되었는지 확인하도록 변경했습니다.

authStore에 새로운 state 추가

• expDate: 로그인 만료 시각 저장
• setExpDate: expDate 업데이트 함수

useExpDate 훅 생성

const useExpDate = () => {
  const accessToken = localStorage.getItem('accessToken');
  const { setExpDate } = useAuthActions();

  const handleExpDate = () => {
    if (accessToken) {
      try {
        const decode = jwtDecode(accessToken);
        if (!decode.exp) return;
        const date = new Date(0);
        date.setUTCSeconds(decode.exp);
        setExpDate(date);
      } catch (error) {
        console.error('Failed to decode token:', error);
      }
    }
  };

  return { handleExpDate };
};

• handleExpDate함수는 로그인이 만료되는 시각을 구해 expDate 상태를 업데이트합니다.
• 엑세스 토큰을 디코딩하면 만료 시각을 구할 수 있습니다.
• 엑세스 토큰을 반환하는데 jwt-decode 라이브러리를 사용합니다.
  참고: 쉽게 이해하는 jwt-decode 라이브러리

Header 컴포넌트에 로그인 만료 타이머 구현

const hasExpired = (expirationDate: Date) => {
  if (!expirationDate) return false;
  const currentDate = new Date();
  const timeDiff = expirationDate.getTime() - currentDate.getTime();
  return timeDiff <= 0 ? true : false;
};

• hasExpired 함수는 엑세스 토큰이 만료되었다면 true, 아니라면 false를 리턴합니다.
• 인수로 받은 만료 시각과 현재 시각의 차이를 구해 0보다 작다면 true를 리턴합니다.

  useEffect(() => {
    let expireInterval: NodeJS.Timeout; 
    if (!expDate) handleExpDate(); // 만료 시각이 null이라면 구합니다.
    
    if (expDate) {
      expireInterval = setInterval(() => {
        if (hasExpired(expDate)) { // 엑세스 토큰이 만료되었다면
          const setting = {
            title: MODAL.authentication_error.title,
            content: MODAL.authentication_error.content,
          };

          const button1 = {
            active: true,
            text: MODAL.confirm,
            color: semantic.light.accent.solid.hero,
            interaction: INTERACTION.accent.subtle(),
            clickHandler: () => (window.location.href = '/'),
          };

          clearAuth(true); // 로그아웃시키기
          clearInterval(expireInterval); // setInterval 실행 정지
          modal(setting, button1); // 모달 띄우기
        }
      }, 60000);
    }

    return () => {
      if (expireInterval) clearInterval(expireInterval);
    };
  }, [memberId, expDate]);

• 1분(60000ms)마다 만료 시각과 현재 시각을 비교하여 만료되었는지 확인합니다.
• 만료되었다면 로그아웃을 시키고 모달을 띄웁니다.
• 모달의 확인 버튼 클릭 시 소개페이지로 이동합니다.
  • 이를 위해 useLogout을 조금 수정했습니다.
  • clearAuth()에 isExp 인수가 있을 경우에는 소개페이지 이동 코드가 실행되지 않도록 했습니다.

setInterval은 1분마다 로그인 만료를 확인하는데 이때 확인되는 만료에 의해 모달이 뜰 경우, 로그인 만료 시간 30분이 지나\n자동으로 로그아웃 되었어요 메시지가 나타납니다. 하지만 setInterval 함수가 먼저 만료를 확인하지 못한 상태에서 사용자가 페이지 이동/새로고침으로 엑세스 토큰이 만료된 것을 알게 되었을 경우에는 useUser 내부의 401에러 모달이 나타납니다. 이 경우 액세스 토큰 추출에 실패했습니다. 다시 로그인 해주세요 메시지가 나타납니다.

🚨 버그 발생 이유 (선택 사항)

🔎 후속 작업 (선택 사항)

🤔 질문 사항 (선택 사항)

📚 참고 자료 (선택 사항)

추가적인 참고 사항이나 관련된 문서, 링크 등을 제공해주세요.

📸 스크린샷 (선택 사항)

변경 사항에 대한 스크린샷이 있다면 첨부해주세요.

✅ 셀프 체크리스트

• 브랜치 확인하기
• 불필요한 코드가 들어가지 않았는지 재확인하기
• issue 닫기
• reiewers, assignees, Lables 등록 확인하기

이슈 번호: Close #227

[KKYHH]

고생하셨습니다 채연 님 🫡
채연 님 덕에 네트워크 탭이 쾌적해지겠군요 👍

[KKYHH]

jwt-decode 라이브러리로 accessToken을 디코딩 해서 만료 시간을 추출하고 지정한 시간이랑 비교하는 거군요!

제가 피드백 받은 내용은 쿠키 사용이었는데 저희 로그인할 때 받은 accessToken 유효 시간을 쿠키에 저장하는 게 안됐었나요? 아니면 리프레시 토큰 사용이 안 됐었나요? 쿠키를 사용하는 게 좀 더 효율적이라는데 전에 뭔가 안돼서 힘들었던 거 같은데..🤔

채연 님 기억하실까요?! 궁금해져서 여쭤봅니다 🙇

[rkdcodus]

그러게요! 쿠키에 저장하지 않은 이유가 있던거같은데 기억이 잘 안나네요 흠흠 🤔
리프레쉬 토큰은 없고 엑세스 토큰이라도 쿠키에 넣어보도록 한 번 시도해볼게요!