Token 로그인 구현 (feat. 보안이 너무 어려웡🤔)

 

현재 운영중인 어드민의 로그인 시스템이 엉망이라 리뉴얼을 진행중인데,

역시 가장 손이 많이 가는 계정 관리 그리고 로그인쪽이다.

우리도 이제 세션이 아닌 jwt토큰을 사용하기로 했다.

- 라고 글쓰면서 우린 어드민이라 사용자가 많은 것도 아니고 서버 확장도 이루어 지지 않을 것 같은데.. 그럼 보안이 더 나은 session이 좋지 않나? 우선 많이 사용하는 JWT로 정해졌으니 ...

 

1. 로그인

2. 백엔드에서 토큰값과 리프레시 토큰값 반환

3. 로컬스토리지 또는 쿠키에 토큰 값 저장

4. 백엔드 API 호출 시 헤더에 토큰과 함께 요청

5. 만약 토큰이 만료된 토큰이라면 리프레시 토큰으로 토큰 재발급

 

음..그리고 여기서 클라이언트에게 토큰을 저장 하니 보안이 신경 안쓰일 수가 없어졌다.

참고글을 보고 Token은 Local Storage에, Refresh Token은 Secure, HttpOnly Cookie에 넣어주기로 결정했다.

HttpOnly : Javascript로 통한 접근 막기

Secure : 안전한 환경(SSL/TLS 암호화된 연결)에서만 전송 

Token은 털리더라도 Refresh Token만은 안돼...! ( 추후에 더 나아가 디비로도 관리하는 방법을 생각해봐야겠다 )

 

Local Storage에 Token 저장

/**
 * AD_TOKEN - 사용자 토큰 accessToken, refreshToken
 */
const AD_TOKEN = 'AD_TOKEN';

/**
 * Get Token
 */
export const getToken = () => {
  return localStorage.getItem(AD_TOKEN) ? JSON.parse(localStorage.getItem(AD_TOKEN) as string) : null;
};

/**
 * Set Token
 * @type {string}
 */
export const setToken = (data: { accessToken: string; refreshToken?: string }) => {
  const sData = JSON.stringify(data);
  localStorage.setItem(AD_TOKEN, sData);
};

/**
 * Remove Token
 * @type {string}
 */
export const removeToken = () => {
  localStorage.removeItem(AD_TOKEN);
};

 

 

Cookie에 Refress Token 저장

import cookie from 'react-cookies';

/**
 * Get RefressToken
 */
export const getRefressToken = () => {
  return cookie.load(AD_RF_TOKEN);
};

/**
 * Set RefressToken
 * @type {string}
 */
export const setRefressToken = (refreshToken: string) => {
  cookie.save(AD_RF_TOKEN, refreshToken, {
    path: '/',
    // secure: true,
    // httpOnly: true
  });
};

 

 

지금 쿠키관련 CORS를 허용안해놔서 주석처리로 해두었다.

추후에 다시 이어서 완전한 글을 쓰는 걸로..!

 

참고글

[프론트에서 안전하게 로그인 처리하기 (Feat. React)]

[브라우저에서 JWT는 어디에 저장해야 하나요?]