[개발 일지] 게시판(자동 로그아웃 타이머)

자동 로그아웃 타이머

사용배경

기존에 로그인 성공하면 jwt를 생성하여 서버와 연결 체크를 하였다. 여기서 30분이라는 만료시간을 설정하였는데 이것을 클라이언트 사용자가 인식할 필요가 있었다.
많은 웹 페이지들이 자동 로그아웃 타이머를 보여주는 것을 보고 아이디어를 얻었다.

처음 개발했을 때 문제점

처음 개발하였을 때 시간 30분을 클라이언트에서 설정하였다. 발생하는 문제점은 사용자가 새로고침을 하였을 때 다시 30분으로 리셋 되는 것이였다. 그래서 서버에서 시간을 받아와 클라이언트에서 시작시간을 정해야 했다.

로직 설명

1. 로그인 할 때 DB에 로그인 시간도 저장한다.

2. 클라이언트에서 타이머 api 호출

useEffect함수를 통해 렌더링 후 실행 하도록 한다. 또한 의존성 값으로 count가 있는데 count는 추후 연장버튼을 눌렀을 때 변경되는 변수이다. 연장버튼을 눌렀을 때마다 타이머 api를 호출한다. api 응답 결과로 logout처리를 할 수 있고 남은 시간을 세팅할 수 있다.

3. 서버 타이머 api

SQL문에 TIMESTAMPDIFF 구문이 있는데 이것을 통해 로그인시간과 현재시간 차이를 초단위로 얻을 수 있다.

4. 클라이언트에서 타이머 구현하기

응답받은 데이터를 가지고 남은시간을 useRef 변수인 time에 설정한다. 그리고 setInterval함수를 통해 1초동안 분, 초를 계산한다.

useEffect 의존성 변수로 sec를 설정하여 sec가 변할 때마다 0초인지 체크를 한다. 0초이면 setInterval 이벤트를 중지시키고 Main페이지로 navigate한다.

결과