사내 프로젝트 중 로그인을 구현하고 있다.
로그인 유지 기능이 있어 구현을 해야하는데 조건은 다음과 같이 정의할 수 있다.
- 체크시, 브라우저창을 닫거나 탭을 닫아도 다시 들어올 때에도 로그인이 유지되어야함.
- 체크를 안할시, 브라우저창을 닫거나 탭을 닫으면 다시 들어왔을 때 로그인을 다시 해야한다.
우선 나의 경우, 로그인 성공시 로그인 정보를 localStorage에 담고 있다.
localStorage에 있는 값을 기준으로 하여 로그인 여부 및 서비스 카테고리 접근 권한을 준다.
이에 따라 로그인 유지을 구현할 때에 2가지 방법을 생각하였다.
- 로그인 유지에 체크를 안할시 브라우저창을 닫을 때, localStorage에서 로그인 정보 지워주기
- 체크시 localStorage에,체크안할 시 sessionStorage에
1. localStorage에서 로그인 정보 지워주기
우선 첫번째 방법부터 시도해보았다.
첫번째 방법은 로그인 유지 체크박스에 체크를 할시에는 기존대로 localStorage에 유지시켜주고 체크를 하지 않을 시에는 브라우저 창을 닫거나 탭을 닫을 때 localStorage에서 로그인 정보를 지워주는 것이다.
검색 결과, 창을 닫을 때 발생하는 이벤트가 있었다.
beforeunload
beforeunload 이벤트는 window, 문서(document) 및 해당 리소스가 언로드(unload) 되려고 할 때 시작됩니다.
출처: MDN
이 이벤트는 브라우저 창이 닫히기전에 발생한다고 한다.
따라서 최상단 파일인 App.tsx에서 아래 코드를 구현해주었다.
useEffect(() => {
window.addEventListener("beforeunload", () => {
userLogout(); // localStorage에서 로그인 정보를 지워주는 함수
});
return () => {
window.removeEventListener("beforeunload", () => {
userLogout();
});
};
});위 코드에 대해 설명하자면 페이지 진입시 beforeunload 이벤트가 언제든 실행될 수 있도록 등록해둔다.
그리고 브라우저 창이 닫힐 때를 감지하여 등록해두었던 이벤트가 감지되어 실행된다.
실행 뒤에는 해당 이벤트를 제거해주기위해 useEffect 클린업 함수에서 이벤트를 제거해준다.
문제점
위처럼 구현하면 localStorage에서 로그인 정보를 제거할 수 있다.
하지만 문제점이 있다.
beforeunload라는 이벤트가 창을 닫는 이외에 상황에서도 발생할 수 있다는 점이다.
beforeunload 이벤트는 다음과 같은 상황때 발생한다.
1. 브라우저 창을 닫을 때.
2. 브라우저 창을 새로고침할 때.
3. 브라우저 탭을 닫을 때.
4. 페이지 내부에서 링크를 클릭하여 다른 페이지로 이동하려고 할 때.
5. 브라우저에서 뒤로가기 또는 앞으로 가기 버튼을 사용하여 페이지 탐색하려고 할 때.
즉, 새로고침하거나 뒤로가기 앞으로 가기를 하면 로그인 정보가 지워질 수도 있다는 것이다.
이는 내가 구현하고자하는 바를 충족시켜주지 못한다.
따라서 이 방법은 패스했다.
2. 체크시 localStorage에,체크안할 시 sessionStorage에
두번째 방법은 로그인 유지 체크박스에 체크시에는 로그인 정보를 localStorage에 담아주고 체크를 안할 시에는 sessionStorage에 담아주는 방식을 사용하는 것이다.
localStorage
- 데이터는 모든 탭과 창에서 공유
- 브라우저나 OS가 재시작하더라도 데이터 유지
sessionStorage
-
sessionStorage는 현재 떠 있는 탭 내에서만 유지
같은 페이지라도 다른 탭에 있으면 다른 곳에 저장되기 때문. -
페이지를 새로 고침할 때 sessionStorage에 저장된 데이터 유지
하지만 탭을 닫고 새로 열 때는 데이터 제거
위와 같이 sessionStorage를 사용하면 내가 구현하고자하는 바에 대한 의도를 정확히 충족시켜준다.
따라서 체크시에는 로그인 정보를 localStorage에 담아주고 체크 안할 시에는 sessionStorage에 담아주는 방법을 사용하였다.
마무리
첫번째 방법(beforeunload)을 사용했을 시에는 새로고침시에도 작동한다는 상황을 몰랐을 뿐더라 그에 앞서 App.tsx에서 코드가 작동하지않아 많은 삽질을 하였다.
삽질 뒤에 2번째 방법을 구현했을 시에는 딱히 코드적으로는 어려운 것이 없어 금방 구현하였다.
