안녕하세요 AccessToken 관련 질문입니다.

안녕하세요 얼마전에 Access Token 관련 질문을 드렸습니다.

저는 Backend 강의만 듣고 있어서 Frontend 강의가 어떻게 진행되었는지 몰라서 여쭤봅니다!

현재 전역 스테이트 변수인 recoil을 사용해서 AccessToken을 저장 중 입니다.

하지만 그냥 recoil만 사용할 때는 새로 고침 시 데이터가 삭제되어서 문제가 되고 있습니다.

persistAtom 이라는 속성을 사용해서 상태가 유지되도록 할 수 있다는 것을 알게 되었는데 이렇게 사용할 경우 localstorage에 토큰 값이 그대로 들어가더군요.

그러면 토큰 값이 그대로 노출되어서 보안상 문제가 될 것 같은데

혹시 이게 문제가 안되는지, 그대로 사용해도 되는지
아니면 새로고침시 계속 token이 사라지니까 모든 컴포넌트에 useEffect를 사용해서 restoreAccessToken을 호출하도록 만들면 어떨까요?
다른 방법이 있다면 방향을 알려주세요!

감사합니다.

안녕하세요! rjs2517님!

먼저, 설명을 드리기 앞서 새로고침시 데이터가 초기화되는 이유에 간략히 설명을 드릴게요!

프론트엔드수업, 백엔드수업 모두 브라우저 주소창의 원리가 포함되어 있어요!
이 수업을 들으셨다면, 브라우저 주소창에 주소를 입력하면 그것이 곧 api 요청이 되며, 해당 api에서 html을 받아올지 json을 받아올지만 달라지는 것이고, html을 받아오게되면 html에 들어가있는 태그들이 화면에 그려진다는 원리를 이해하고 계시겠죠!

여기서, 새로고침은 쉽게 말해, 브라우저 주소창에 주소를 입력하고 엔터를 다시 한 번 치는 과정과 동일합니다!
즉, 새롭게 api요청이 들어가게 되고, html을 다시 다운로드 받아와서 화면에 그려주겠죠!
따라서, 새 html과 연결된 js도 다시 새롭게 다운로드 받아 실행되므로, 기존의 변수들은 모두 초기화되어요!

해당 문제를 해결하기 위해, recoil, redux 등의 persist 기능을 사용하게 되지만, 이 역시 js로 만든 라이브러리에 불과하므로 새로고침시 html을 다시 다운로드 받는 과정에서 recoil, redux 등의 js파일도 다시 다운로드 받아지게 되며, 브라우저작동의 핵심 원리를 거스를 수는 없습니다.
다시말해, persist 기능도 마찬가지로 브라우저내의 영구저장소인 localstorage에 임시 저장해놓고 빼오는 기술에 불과할 뿐이므로 결국 localstorage를 사용하게 되어요!

본 프론트엔드 수업에서는 새로고침시 refreshtoken을 전송하여 accesstoken을 재발급 받아 recoil에 저장하는 과정으로 진행이됩니다.
위 방법들 중 가장 보안이 높은 대신 새로고침시마다 서버에 요청이 들어가므로 서버 부하는 더 들 수 있어요!
따라서, 보안수준과 부하수준을 고려하여 적절한 방향을 선택하는 것이 맞을 것 같네요!^^

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