이 글을 쓰다가 내가 얼마나 바보같은 짓을 했는지 깨달아버렸다. 그래서 글을 쓰지 말까, 생각하다가 씁니다.
문제 상황
- 메인 페이지에선 모집글 리스트를 보여주는 기능이 있다.
- 모집글 리스트는 첫 로딩시 SSR로 렌더링 되었다.
- 로그인을 한 후 SSR로 렌더링된 메인페이지에 접근하면, 좋아요 버튼을 누른 게시글의 좋아요가 활성화되지 않는 문제가 생겼다. (CSR로 렌더링하면 해당 문제는 사라졌다.)
왜 이런 문제가 발생했는가
- 해당 서비스는 JWT 토큰에 인증 정보를 저장한다.
- 로그인 시 accessToken은 응답으로 들어와 로컬 스토리지에 저장되고, refreshToken은 서버에서 httpOnly cookie로 설정해준다.
3. 당연히 SSR은 server-side 환경에서 작동하기 때문에 로컬 스토리지를 접근하지 못하고, 인증정보를 얻어오지 못하고 요청을 보낸다.
-> 고로 좋아요 정보를 얻어오지 못한다!
시도한 방법에 들어가기 전에
(뻘글) 내가 왜 바보였는지 고해성사를 하자면...
사실 해당 작업은 몇 달 전, 내가 프로젝트의 로그인 과정을 이해하지 못한 채로 시작했던 작업이었다. 로그인 파트를 담당하지 않았던 나는, 갑자기 좋아요 정보가 노출되지 않는다는 말에 토큰을 가져올 생각은 했지만 어떤 토큰을 가져와야 하는지는 생각하지 않았다.
그래서... 사실은, 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은 어디에 담는게 가장 좋을까?
