이 글을 쓰다가 내가 얼마나 바보같은 짓을 했는지 깨달아버렸다. 그래서 글을 쓰지 말까, 생각하다가 씁니다.
(뻘글) 내가 왜 바보였는지 고해성사를 하자면...
사실 해당 작업은 몇 달 전, 내가 프로젝트의 로그인 과정을 이해하지 못한 채로 시작했던 작업이었다. 로그인 파트를 담당하지 않았던 나는, 갑자기 좋아요 정보가 노출되지 않는다는 말에 토큰을 가져올 생각은 했지만 어떤 토큰을 가져와야 하는지는 생각하지 않았다.
그래서... 사실은, refreshToken만 있어도 로그인이 되는 줄 알았다... accessToken은 로컬 스토리지에 있어서 접근이 불가능하지만 refreshToken은 cookie니까 접근할 수 있겠지? <- 이게 내 생각이었다. 하지만 예상치못하게 httponly cookie는 next에서 읽어와지지 않았고... 그 때부터 삽질이 시작되었다. 애초에 refreshtoken은 지금 중요한 게 아닌데 말이다.🙄 그 간 수명의 사람에게 해당 질문을 했었는데, 아무도 이상한 점을 못느낀듯.
그래서 왜 server-side에서 httpOnly cookie가 읽어와지지 않았냐? 에 대한 삽질은 아직도 현재 진행형이다. 이 내용은 다른 포스팅에서 쓰겠다.
https://github.com/peer-42seoul/Peer-Frontend/pull/367
'cookies-next' 라이브러리를 설치하여 로그인 시 받아오는 accessToken을 next도 접근할 수 있도록 cookie에 설정해주었다.
//로그인 로직
const Login = () => {
...
if (accessToken) {
login(accessToken)
setCookie('accessToken', accessToken) //쿠키 설정
}
...
}
//server side로 fetch하는 부분
export default async function Home() {
const accessToken = getCookie('accessToken', { cookies })
try {
const response = await axios.get(주소,
{
headers: {
'Cache-Control': 'no-store',
Authorization: `Bearer ${accessToken}`,
},
},
)
...
}
그리고 server side 코드에선 cookie에서 accessToken 을 꺼내서 header에 직접 넘겨주는 형태로 작성하였다.
-> 이러니까 잘 작동했다. 하지만 accessToken을 로컬스토리지와 쿠키 둘 다 저장하는 게 맞냐는 의견이 생기면서 이전 방식으로 다시 롤백...😢
결국 좋아요 정보만 따로 client side에서 데이터를 가져오도록 급하게 조치했다. 하지만 별로 좋은 방법은 아니라고 생각해서, 위의 방법으로 다시 바꿔볼까 생각중이다. 아무래도 위의 방식으로 다시 바꾼다면, refresh 문제 때문에 httpOnly 쿠키를 다시 맞닥뜨리게 될 것 같긴하다.
그렇다면 accessToken과 refreshToken은 어디에 담는게 가장 좋을까?