[React] 로그인 시간 설정하기

로그인을 구현하기만 하면 될 줄 알았더니 몇일간 로그인이 유지된다는 말을 듣고 수정해야겠다는 생각이 들어 홈페이지를 봤다. 그런데 나는 매번 로그인하고 로그아웃을 해서 몰랐던 것 같다. 그래서 localstorage에 로그인 정보를 입력하고 그에 대한 값을 삭제하지 않아 계속 로그인이 유지되는 것이었다. 이에 대해 글을 써보려고 한다.

LocalStorage

홈페이지를 구성하다보면 cookie나 session등 저장소를 저장하게 된다. 이도 하나의 종류이며 만료시간은 존재하지 않는다. 그러나 Javascript를 사용하여 TTL(Time to Live)을 추가하여 일정 시간이 경과한 후 localStorage의 항목을 무효화할 수 있다.

만료시간 설정 후 저장

function setWithExpiry(key, value, ttl) {
	const now = new Date()

	// `item` is an object which contains the original value
	// as well as the time when it's supposed to expire
	const item = {
		value: value,
		expiry: now.getTime() + ttl,
	}
	localStorage.setItem(key, JSON.stringify(item))
}

→ localstorage에 만료시간을 지정하고 저장할 값이 여러개라면 함수로 하는 것을 추천한다.

1. 변수를 하나 만들어, localstorage에 저장할 값과 만료시간을 같이 저장한다. 여기서 expirt은 현재일자 + 만료기간을 세팅한다. 단위가 밀리세컨드이다.
2. 그리고 문자열로 변환한 객체를 localstorage에 저장한다.

저장한 항목 가져오기

function getWithExpiry(key) {
	const itemStr = localStorage.getItem(key)
	// if the item doesn't exist, return null
	if (!itemStr) {
		return null
	}
	const item = JSON.parse(itemStr)
	const now = new Date()
	// compare the expiry time of the item with the current time
	if (now.getTime() > item.expiry) {
		// If the item is expired, delete the item from storage
		// and return null
		localStorage.removeItem(key)
		return null
	}
	return item.value
}

→ 1. 읽고자 하는 localstorage의 키를 가져온다.

1. 만약 이 값이 없다면 null로 출력해준다.
2. 현재 시간과 만료시간을 비교해준다. 만약 현재 시간이 클 경우 만료시간이 지났다는 뜻이다. 그러면 해당 키의 값을 삭제하고, null이 출력된다.
3. 만료기간이 지나지 않은 데이터는 value값을 출력해준다. 즉, 가만히 둔다.

최종 코드

const now = new Date().getTime();

  function setWithExpiry(key, value, ttl) {
    const item = {
      value: value,
      expiry: now + ttl,
    };
    localStorage.setItem(key, JSON.stringify(item));
  }

  function getWithExpiry(key) {
    const itemStr = localStorage.getItem(key);
    if (!itemStr) {
      return null;
    }
    const item = JSON.parse(itemStr);
    if (now > item.expiry) {
      localStorage.removeItem(key);
      console.log('user_id 없어짐');
      window.location.reload();
      return null;
    }
    return item.value;
  }

→ 저장하고, 항목을 가져오는 코드에서 현재시간 코드가 겹친다. 그러므로 이를 제일 위에 올려 전역 변수로 사용한다. 그리고 저렇게 사용하면 제대로 인식하는 것을 확인할 수 있다.

localStroage 화면

→ 여기서 필요한 값만 가져와서 사용하면 된다. 그리고 알아서 삭제된다.