[리팩토링]_로컬 스토리지와 함께하는 토큰 보안: TokenStorage 클래스 분석

hanseungjune·2023년 8월 10일

리팩토링

목록 보기
13/25
post-thumbnail

해당 TokenStorage 클래스 코드를 작성한 이유

  1. 중앙화된 토큰 관리
    로그인 토큰을 한 곳에서 관리하면 다른 부분에서 토큰에 접근할 때 일관된 방식으로 처리할 수 있습니다. 이로 인해 코드의 중복성을 줄이고 유지 보수를 간편하게 할 수 있습니다.
  1. 보안 강화
    비공개 클래스 속성 (#nekotsseacce)을 사용하면 클래스 외부에서 직접 액세스할 수 없으므로, 토큰의 무분별한 접근을 막을 수 있습니다. 또한, 로컬 스토리지를 이용하면 세션 관리보다 영속성이 좋아 로그인 상태를 유지하기에 효과적입니다.
  1. 편리한 인증 처리
    해당 클래스는 토큰의 저장, 조회, 제거와 같은 기능을 제공합니다. 따라서 인증이 필요한 다양한 상황에서 이 클래스를 활용하면 빠르고 편리하게 인증 처리를 할 수 있습니다.
  1. 확장성
    추후 토큰 관련 로직이 변경되더라도, 이 클래스 내에서만 변경하면 되므로 유연성과 확장성을 높일 수 있습니다. 이는 큰 프로젝트에서 특히 중요한 측면입니다.

작성 코드 및 설명

export class TokenStorage {
  #nekotsseacce = "";

  constructor() {
    this.#nekotsseacce = localStorage.getItem("accessToken") || "";
  }

  setToken(token: string) {
    this.#nekotsseacce = token;
    localStorage.setItem("accessToken", token);
  }

  getToken() {
    return this.#nekotsseacce;
  }

  removeToken() {
    this.#nekotsseacce = "";
    localStorage.removeItem("accessToken");
  }
}
  1. 생성자 (constructor)
    클래스가 생성될 때 실행되며, 로컬 스토리지에서 accessToken을 가져와 비공개 클래스 속성 #nekotsseacce에 저장합니다. 이 속성은 클래스 내에서만 액세스 가능합니다.

  2. setToken 메서드
    토큰을 받아 로컬 스토리지에 저장하고, 비공개 속성에도 할당합니다. 이를 통해 토큰을 안전하게 유지하고 재사용할 수 있습니다.

  3. getToken 메서드
    저장된 토큰을 반환합니다. 로그인 상태를 확인하거나 인증이 필요한 API 요청을 할 때 사용됩니다.

  4. removeToken 메서드
    토큰을 제거하는 메서드로, 로그아웃 시나 토큰 만료 등의 상황에서 사용됩니다.

profile
필요하다면 공부하는 개발자, 한승준

0개의 댓글