인프런 커뮤니티 질문&답변
작성한 질문수
로그아웃 시 router cache 갱신 안됨
작성
·
351
·
수정됨
0
signOut({ redirect: false }).then(() => {
fetch(`${process.env.NEXT_PUBLIC_BASE_URL}/api/logout`, {
method: "post",
credentials: "include",
});
router.refresh();
router.replace("/");
});
로그아웃 버튼에 `router.refresh()`를 추가하면 로그아웃 버튼을 누르고 다시 로그인했을 때 기존 정보의 캐시가 삭제되고 새로 갱신된다고 하셨는데
저 코드를 추가해도 기존 정보가 계속 남아있는 경우는 어디를 확인해봐야 할까요?
브라우저에서 캐시 지우고 새로고침, 브라우저 창 재시작, 서버 껐다 켜기를 해봤는데도 계속 이전 정보가 남아있습니다..
답변 3
0
0
현재 ch4 코드에서 router.refresh()를 추가하니 기존 정보가 없어지는 것을 확인했습니다. 한 가지 다른 점은 router.redirect('/') 앞이 아니라 뒤에 refresh를 넣으니 됩니다. 앞에 넣으면 안 되네요.
이 부분은 저도 단순히 공식문서로는 확인이 안 돼서 한 번 next.js 소스코드 까보겠습니다. 일단 우열님의 추론이 맞는 것 같습니다.
rotuer.refresh가 current route를 refresh하는 거라서 현재 라우트가 누구냐가 중요한 것 같네요.
router.refresh(): Refresh the current route.
0
signOut 시에 next서버쪽에는 에러가 없나요? 브라우저 캐시가 아니라 쿠키를 지워야 로그아웃이 되긴 합니다(이게 signOut의 역할이긴 합니다). 네트워크탭의 로그아웃요청 cookies 탭에서 쿠키가 사라지고 있어야 합니다.
네.. 에러는 전혀 없구요.
네트워크 탭에서 프론트, 백 쿠키 모두 지워지고 있습니다.
라우터 캐시라고 하셔서 클라이언트에 캐시가 남아있다고 판단했습니다.
새로고침하면 다시 로그인한 유저 정보가 들어오긴 합니다.
├── @auth/core@0.27.0
├── @faker-js/faker@8.4.1
├── @mswjs/http-middleware@0.9.2
├── @tanstack/react-query-devtools@5.28.4
├── @tanstack/react-query@5.28.4
├── @types/cors@2.8.17
├── @types/express@4.17.21
├── @types/node@20.11.26
├── @types/react-dom@18.2.22
├── @types/react@18.2.65
├── classnames@2.5.1
├── cookie@0.6.0
├── cors@2.8.5
├── dayjs@1.11.10
├── eslint-config-next@14.1.3
├── eslint@8.57.0
├── express@4.18.3
├── msw@2.2.4
├── next-auth@5.0.0-beta.11
├── next@14.1.3
├── react-dom@18.2.0
├── react-intersection-observer@9.8.1
├── react-textarea-autosize@8.5.3
├── react@18.2.0
├── typescript@5.4.2
└── zustand@4.5.2
현재 npm 리스트 이렇게 사용중입니다
뒤에 넣으니 해결 됐습니다!
앞에 넣은 경우는
/home에서 로그아웃을 한 경우/home의 캐시를 지우고/로 리다이렉트가 되고/에서 로그인을 다시 하는 경우/에 캐시가 남아있어 캐시된 정보를 불러왔다고 판단해야 할까요?뒤에 넣은 경우는
/home에서/로 리다이렉트를 한 뒤 refresh로 캐시를 지웠기 때문에/의 캐시된 데이터가 없어 로그인 후에/home에서 새로운 데이터를 갱신했기 때문인건지 궁금하네요..