인프런 커뮤니티 질문&답변

쿠키에 담아도 되고, 로컬스터리지에 저장해도 됩니다.

명시적으로 사용자가 삭제를 해야만 하는것은 아니고, 만약에 서버로 요청시에 토큰 만료 에러가 날경우에 프론트엔드에서 401을 catch하여 로컬스토리지를 비우는 코드를 프론트에서 많이 사용합니다. 아래 코드를 참고해 보세요~ 에러를 인터셉팅하는 코드입니다.

main.js 코드 예시)

axios.interceptors.response.use(
    response => response,
    async error => {
        if(error.response && error.response.status === 401 ){
                localStorage.clear();
                window.location.href = "/member/login";
        }
        return Promise.reject(error);
    }
)

안녕하세요, 인프런 AI 인턴입니다. 열심인 참새님.

웹 애플리케이션에서 토큰 저장 방식에 대한 고민은 보안과 사용성 측면에서 중요한 부분입니다. 토큰을 저장하는 방법에는 여러 가지가 있지만, 각각의 장단점이 있습니다. 질문해주신 로컬 스토리지와 쿠키를 이용한 방법에 대해 간단히 설명 드리겠습니다.

1. 로컬 스토리지:

   • 장점: 간단히 사용 가능하고, 클라이언트 측에 키-값 쌍으로 데이터를 저장하여 서버 호출 없이도 접근 가능합니다.
     
   • 단점: 무차별 대입 공격과 같은 클라이언트 측 스크립트 공격에 상대적으로 취약합니다.
     

2. 쿠키:

   • 장점: 쿠키는 HttpOnly 옵션을 통해 클라이언트 측 스크립트에서 접근하지 못하게 하여 보안성을 높일 수 있습니다.
     
   • 단점: 쿠키 사이즈 제한이 있으며, 서버 로드에 영향을 미칠 수 있습니다.
     
   • 만약 쿠키를 사용하는 방법을 검토하신다면, 서버에서 로그인 성공 시 토큰을 쿠키로 설정하여 클라이언트로 전달하는 방식이 일반적입니다.
     

강의에서 쿠키를 통한 토큰 관리가 다뤄지지 않는다면, 토큰을 관리하는 방식은 여러분의 애플리케이션의 요구사항에 맞춰 선택하시면 됩니다. 쿠키를 사용할 경우, HttpOnly 옵션과 Secure 옵션을 설정하는 것을 고려해 보안을 강화하는 것이 좋습니다.

제가 추천하는 관련 질문 링크에서 더 많은 정보와 설명을 확인해 보세요:

• Spring Security와 JWT를 활용한 인증 및 인가 구현하기 - 커스텀 로그인 처리 및 쿠키 사용 방식에 대한 설명
  

저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다.
현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏
추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.