2025/02/07 2

본격 연동 #1. 토큰 헷갈리지 않게 설정하기: 로그인 & API 인증 문제 해결 과정 -> axios Instance와 요청 인터셉터 그리고 응답 인터셉터

1. 서론: 왜 토큰 인증이 문제였을까? 최근 프로젝트에서 JWT 토큰을 이용한 인증 시스템을 구현하는 과정에서 예상치 못한 문제를 마주하게 되었습니다.로그인 후 localStorage에 accessToken과 refreshToken이 저장되는 것은 확인되었지만,이후 API 요청을 보낼 때 accessToken이 null로 나오는 이상한 현상이 발생했습니다. 이 글에서는 API 인증 과정에서 발생할 수 있는 토큰 문제를 어떤 방식으로 해결했는지 상세히 기록해두고자 합니다.JWT 인증을 구현하는 과정에서 accessToken과 refreshToken을 헷갈리지 않도록 설정하는 방법을 중심으로 설명하겠습니다. 서버에는 잘 토큰 두개가 정상적으로 저장되는가?서버는 명세서대로 정확히 전달되었습니다. 즉, 사용자..

회원가입 시 고유한 토큰 저장을 로컬스토리지를 쓰고도 해결했던 방법

프로젝트 개발 중 생각한 방식!여러 개의 계정을 개시할 때 복잡해지는 경우가 많은데, 특히 같은 브라우저에서 다른 계정을 개시할 때 고유한 정보가 남아있으면 문제가 될 수 있다.특히, 회원가입 후가 되도 기존의 토큰이 공유되면, 새로 개시된 계정이 기존 사용자로 로그인 되는 문제가 발생할 수 있다.현재 발생하는 문제: 회원가입후 여전한 결과현재 회원가입을 한 후, localStorage에 고유되는 토큰이 보이고 있는 경우가 많다.회원가입 성공: {message: '요청에 성공했습니다.'}apiClient.jsx:17 🔑 ACCESS-AUTH-KEY: eyJhbGciOiJIUzI1NiJ9...apiClient.jsx:18 🔄 REFRESH-AUTH-KEY: eyJhbGciOiJIUzI1NiJ9...이 ..

FrontEnd Develop 2025.02.07