서버와 토큰으로 인증 확인하기

1. token에 대한 공부

JWT란 무엇이고 어떻게 사용하는가?

제 블로그에서 JWT가 무엇이고 어떻게 사용할 수 있는 지에 대해서 자세히 기술해두었습니다. localStorage에 토큰을 저장하고 가져오고 사용하는 코드는 아래의 코드를 확인하시면 됩니다.

위치는 여기입니다.

//TokenStorage.ts
const TOKEN = 'token';

export function saveToken(token: string) {
  localStorage.setItem(TOKEN, token);
}

export function getToken() {
  return localStorage.getItem(TOKEN);
}

export function clearToken() {
  localStorage.clear();
}

2. cient 에서 token 만료 시간 설정

커밋 : FIX: 로그인 토큰 클라이언트에서 삭제 되지 않는 오류

현재에는 서버에만 만료 시간이 있으며, 클라이언트에서는 로그아웃을 누르지 않는 이상 토큰이 삭제가 되지 않고 있습니다. 따라서 토큰 자체에 만료 시간을 적어주도록 합니다.

//TokenStorage.ts

const TOKEN = 'token';
const expireHour = 2;

export function clearToken() {
  localStorage.clear();
}

export function saveToken(token: string) {
  const tokenObj = {
    value: token,
    expire: Date.now() + expireHour * 60 * 60 * 1000,
  };
  const tokenObjString = JSON.stringify(tokenObj);
  localStorage.setItem(TOKEN, tokenObjString);
}

export function getToken() {
  const tokenObjString = localStorage.getItem(TOKEN);
  if (!tokenObjString) {
    return null;
  }
  const tokenObj = JSON.parse(tokenObjString);
  if (Date.now() > tokenObj.expire) {
    clearToken();
    return null;
  }
  return tokenObj.value;
}

만료 시간을 두 시간으로 잡았습니다. 따라서 두 시간 후에는 로그인을 다시 해야합니다.