jwt를 사용할 때 accessToken과 refreshToken의 저장 위치에 대한 생각

[jinhokim98]

회원가입을 하고 로그인을 할 때 서버에서 accessToken을 받아와 이후에 요청을 보낼 때 accessToken을 넣어 나임을 인증할 수 있다.
그렇다면 프론트에서 이 두 가지 토큰을 어디에 저장해야 할까에 대해 고민하게 되었다.

내 생각은 이랬다.
access token은 유효기간이 짧기 때문에 로컬스토리지에 저장하고 쓰는데 refreshToken은 어디에 저장해야할까...
이 토큰은 중요한 정보여서 털리면 끝장나기 때문에 고민을 하게 되었다.

• 로컬스토리지에 저장
  여기에 저장하면 새로고침해도, 브라우저를 종료해도 값이 날라가지 않기 때문에 유용하게 사용할 수 있다.
  하지만 로컬스토리지는 js로 접근이 가능하여 보안에 취약한 단점을 가지고 있기 때문에 사용할 수 없을 듯 하다....

그래서 대안을 찾아보고자 계속 찾아본 결과 좋은 글이 있어 첨부합니다.
https://velog.io/@yaytomato/%ED%94%84%EB%A1%A0%ED%8A%B8%EC%97%90%EC%84%9C-%EC%95%88%EC%A0%84%ED%95%98%EA%B2%8C-%EB%A1%9C%EA%B7%B8%EC%9D%B8-%EC%B2%98%EB%A6%AC%ED%95%98%EA%B8%B0

이 글을 요약하자면

1. accessToken도 로컬스토리지에 저장하면 안된다.
2. 로그인을 완료한 후 axios.defaults.headers.common['Authorization'] = Bearer ${accessToken}; 을 실행하여 로그인 후 axios 요청을 보낼 때 자동으로 accessToken을 담아 보낼 수 있게 해야한다.
3. refreshToken은 백엔드에서 HTTP response set-Cookie 헤더에 refreshToken 값을 설정해 보내준다.
4. 이렇게 할 시, 페이지를 새로고침하면 access token이 날라가게 되는데 slient refresh을 이용하여 로그인 연장을 하면 된다.

위 내용으로 코드를 수정해야겠다...