[Develog] 자바스크립트 새로 고침해도 로그인 유지하는 방법

localStorage와 sessionStorage

웹 스토리지 객체인 localStorage와 sessionStorage는 브라우저 내에 키-값 쌍을 저장할 수 있게 해준다.
sessionStorage는 새로고침해도 데이터가 사라지지 않게하고
localStorage는 브라우저를 다시 실행하도 데이터가 사라지지 않고 남아있다.

쿠키를 사용해도 되는데 왜 웹 스토리지 객체를 사용할까?

• 쿠키와 다르게 웹 스토리지 객체는 네트워크 요청 시 서버로 전송되지 않기 때문에 쿠키보다 더 많은 자료를 보관할 수 있다. 대부분의 부라우저가 최소 2MB 혹은 그 이상의  웹 스토리지 객체를 저장할 수 있도록 해준다. 또한 개발자는 브라우저 내 웹 스토리지 구성 방식을 설정할 수 있다.
• 쿠키와 또 다른 점은 서버가 HTTP 헤더를 통해 스토리지 객체를 조작할 수 없다는 것, 웹 스토리지 객체 조작은 모두 자바스크립트 내에서 수행된다.
• 웹 스토리지 객체는 도메인, 프로토콜, 포트로 정의되는 오리진(origin)에 묶여있다. 따라서 프로토콜과 서브 도메인이 다르면 데이터에 접근할 수 없다.

localStorage와 sessionStorage가 제공하는 메서드와 프로퍼티

• setItem(key, value) – 키-값 쌍을 보관합니다.
• getItem(key) – 키에 해당하는 값을 받아옵니다.
• removeItem(key) – 키와 해당 값을 삭제합니다.
• clear() – 모든 것을 삭제합니다.
• key(index) – 인덱스(index)에 해당하는 키를 받아옵니다.
• length – 저장된 항목의 개수를 얻습니다.

두 스토리지 객체는 Map과 유사하다. 하지만 인덱스를 사용해 키에 접근할 수 있다는 점에서 차이가 있다.

 

이 부분에 대해서 몰랐기 때문에 프로젝트 진행 시 라우팅 오류가 발생했다.
로그인 중임에도 불구하고 메인페이지가 아닌 다른페이지에서 새로고침을 하면 다시 로그인 창이 떴기 때문이다.

원인은 위이 사진처럼 authService를 이용하였기 때문이다.
currentUser 정보를 저장하고 있는 곳이 없다보니 새로고침 시에는 currentUser 정보를 판단할 수 없었기 때문에 계속 로그인 페이지로 보냈던 것이다.

따라서 세션 스토리지를 이용하기로 했다.

로그인 시에 세션 값을 setting한다.

login.js

 

router.js

전체 콘텐츠 보여주는 all-post.js

그리고 세션이 필요한 곳에서 getItem을 통해 원하는 정보를 가져온다.

로그아웃 시 세션 값을 초기화한다.

이렇게함으로써 브라우저를 종료하지 않는 경우에 로그인 데이터를 계속 유지시킬 수 있었다.