쿠키 및 서버사이드렌더링 관련 문의드립니다.

[리뉴얼] React로 NodeBird SNS 만들기

작성

651

안녕하세요 제로초님! 멘토링했었던 비오입니다. ㅎㅎ

강의 수강 후 개인프로젝트로 sns클론을 만들면서 사용자인증을 세션쿠키방식 대신 토큰방식으로 사용했었는데,

한 번 로그아웃 클릭 시 화면 변경이 없고, 두번 클릭해야만 로그인화면으로 넘어가는 문제때문에 다시 문의드립니다 ㅜㅜ

서버사이드 렌더링쪽에서는 'silent-login'요청을 사용해 리프레시 토큰을 서버에 쿠키로 넘겨주어 로그인을 진행하고,

_app 에서 'refresh' 요청을 사용하여 쿠키에 포함된 리프레시토큰으로 access 토큰을 받아오는 방식으로 구현했어요.

그 후 새로고침 시 로그인이 풀리는 문제는 해결이 되었는데, 여전히 로그아웃 문제가 해결되지 않습니다...

첫번째로 로그아웃 요청을 했을 때 백서버 로그입니다.

logout 요청이 성공 한 후, silent-login(서버사이드렌더링쪽 요청)은 성공해서 로그인창으로 이동하지 않는것 같아요.

(더 정확한 상황을 말씀드리면, 잠깐 로그인 창이 보였다가 로그인된 상태의 메인화면이 보입니다.)

브라우저를 확인 했을 때, 쿠키는 없고, 그래서 refresh 요청은 실패합니다. (silent-login도 실패해야하는데말이죠...ㅠㅠ)

이 상태에서 새로고침을 누를 경우, 로그인창으로 이동합니다.

서버사이드렌더링쪽에서 context.req.headers.cookie 를 로그찍어보면

로그아웃 이후 여전히 토큰이 존재하는 것으로 나옵니다.

(로그아웃을 한번 더 클릭하면 그 다음번 로그에는 undefined로 뜹니다.)

logout요청 시 브라우저의 쿠키가 삭제되는건 확인했는데,

왜 프론트서버에서는 쿠키를 보내줄 수 있는걸까요?

redux react nodejs express Next.js

답변 6

제로초(조현영)

지식공유자

사용자 정보는 서버사이드렌더링하지 않는 게 가장 좋은 방식인 것 같긴 합니다.

비오

질문자

어떻게하면 좋을지 좀더 생각해볼게요. 문제 원인을 못찾으면 코드 구조를 다 바꾸거나 아니면 토큰방식을 일단은 포기해야할거같아요...ㅎㅎㅎ 시간내주셔서 감사합니다.

비오

질문자

export const getServerSideProps = wrapper.getServerSideProps(async (context) => {
 const cookie = context.req?.headers.cookie;
  console.log(cookie);
  if (context.req && cookie) {
    axios.defaults.headers.Cookie = cookie;
    context.store.dispatch(silentLogin());
    axios.defaults.headers.Cookie = '';
 }