🤍 전 강의 25% 할인 중 🤍

2024년 상반기를 돌아보고 하반기에도 함께 성장해요!
인프런이 준비한 25% 할인 받으러 가기 >>

  • 카테고리

    질문 & 답변
  • 세부 분야

    프론트엔드

  • 해결 여부

    해결됨

로그인 관련 질문입니다.

24.05.27 15:57 작성 조회수 117

0

https://www.inflearn.com/questions/1268586/%EB%A1%9C%EA%B7%B8%EC%9D%B8-%EC%97%90%EB%9F%AC-%EC%A7%88%EB%AC%B8%EC%9E%85%EB%8B%88%EB%8B%A4
여기에서 질문했던 로그인 관련 문제입니다.

지금 현재 로그인 후 로그아웃 후 다른 아이디로 재로그인시에 로그아웃 버튼에 session정보가 제대로 안들어가는 것 같습니다.

처음 로그인 했을 때 로그아웃에 session 정보가 들어가고, 로그아웃 후 다른 아이디로 재로그인시에 로그아웃버튼에 로그아웃전의 계정의 정보가 들어가 있습니다. 백엔드 서버 콘솔에는 정보가 제대로 들어가 있지만,

let session = await auth(); 에서 session정보가 제대로 안 받아지는건지, 아니면 캐싱된 정보가 계속 쓰이는 건지 모르겠지만, 정보가 제대로 안들어갑니다.

물론 새로고침시에 정상적으로 정보가 들어가집니다.

제 프로젝트에서 문제가 있는건가 싶어서, 코드를 비교해보고 next, next-auth 버전을 바꿔보기도 했지만, 해결이 안되어서, 배포된 https://z.nodebird.com/ 링크로도 해보았는데 똑같은 버그가 있는 것 같아서 질문드립니다.

무엇이 문제인지 궁금합니다. 좋은 하루 보내세요!

답변 2

·

답변을 작성해보세요.

0

바로 로그아웃 후 로그인 하는 경우에는 이전 유저가 남아있고, 30초가 지난 뒤에는 세션이 초기화되는 걸로 봐서는 router cache가 맞는 것 같습니다.

router.refresh()가 원래 캐시를 제거하는 해결책이 맞는데 지금 적용해두신 상태인가요?

Link 대신 a 태그를 쓰거나 location.href = '/'로 이동하는 방법도 있다고 하긴 하네요.

 

강주호님의 프로필

강주호

질문자

2024.05.27

네 맞습니다.

로그아웃시에 router.refresh()를 적용한 상태입니다.

제 프로젝트에서는 30초가 지나도 세션이 초기화가 안되는 것 같습니다..; ,

제로초님이 배포하신 https://z.nodebird.com/ 에서는 말씀대로 30초 후에 재 로그인하니 세션이 바뀌네요.

30초동안 캐싱되는 이유가 궁금합니다.

그리고, Link 대신 a 태그를 쓰거나 location.href = '/'로 이동하는 방법을 사용하게 되면
SPA의 장점이 사라지는 것이라 생각해, 좋지 않은 방법이 아닌가요??

그렇다면 next-auth를 사용하여 로그인 / 로그아웃을 구현하였을 때, session 정보는 30초동안의 캐싱을 무조건 가져가게 되는 건가요 ??

https://nextjs.org/docs/app/building-your-application/caching#duration-3

30초동안 캐싱되는 이유는 30초 동안 캐싱된다고 되어있기 때문입니다... ㅎㅎㅎㅎ

a나 location.href를 사용하는 게 안 좋아서 router.refresh()로 캐싱을 없애는 건데 지금 버그인지 몰라도 안 되는 것 같습니다. 원래 저걸로 해결되는 거 확인하고 올린 거였거든요.

router.refresh()를 router.replace 위에 두냐 아래에 두냐에 따라서도 동작이 다릅니다.

이거 이제 그냥 로그아웃 시에 다음처럼 적으면 바로 잘 되는 것 같네요.

signOut({ callbackUrl: '/' });
강주호님의 프로필

강주호

질문자

2024.05.27

/** @type {import('next').NextConfig} */
const nextConfig = {
  experimental: {
    staleTimes: {
      dynamic: 0,
      static: 180,
    },
  },
  async rewrites() {
    return [
      {
        source: "/upload/:slug",
        destination: `${process.env.NEXT_PUBLIC_BASE_URL}/upload/:slug`, // Matched parameters can be used in the destination
      },
    ];
  },
};

export default nextConfig;

 

이렇게 설정했는데 방법이 맞는지 모르겠네요.. 여튼 dynamic을 0 or 1로 바꾸어봤는데 안되네요.

그리고 또 이상한 부분을 발견했는데,

로그아웃 버튼은 그대론데 재 로그인시에, PostForm에 있는 이미지는 바뀌네요..
image여기 부분 이미지 입니다.

여기 부분 이미지는 home에 있는 page.tsx에서

const session = await auth();

으로 받아서 prop으로 내려주고,

로그아웃 버튼은 layout.tsx에서

const session = await auth();

로 똑같이 받아서 prop으로 똑같이 내려주는데 결과가 다른게 아이러니 하네요.

page와 layout의 차이라고 하기엔 어차피 afterLogin에 있는 layout이라서 로그인후에 둘다 리렌더링 되는건 마찬가지인데, 왜 결과가 다른걸까요..?
많은 질문 죄송합니다

레이아웃과 페이지가 캐싱이 다르게 됩니다. layout 부분만 전 세션으로 캐싱되어 있는 상황입니다.

강주호님의 프로필

강주호

질문자

2024.05.27

signOut({ callbackUrl: '/' });

네 이렇게 하니까 해결됐습니다 ㅠㅠㅠ

진짜 이것 때문에, 며칠 고생했었는데, 드디어 해결했네요.
감사합니다 제로초님!

덕분에 저도 고쳤습니다! 감사합니다

0

인프런 AI 인턴님의 프로필

인프런 AI 인턴

2024.05.27

안녕하세요, 인프런 AI 인턴입니다.

강주호님의 질문에 대한 답변으로, 로그인 후 로그아웃 과정에서 발생하는 세션 정보의 업데이트 문제는 여러 요인에 의해 발생할 수 있습니다. 다만, 제공해주신 정보만으로는 강주호님의 문제를 직접적으로 해결할 수 있는 구체적인 답변을 제공하기 어려워 보입니다.

그러나 유사한 문제를 겪고 계시는 다른 학습자의 질문과 지식공유자 조현영님의 답변을 참고하시면 도움이 될 수 있습니다. 지식공유자님은 다음과 같이 답변하셨습니다.

해당 답변에서는 auth() 함수를 사용하여 유저 정보를 받아 처리하는 방식이 언급되어 있습니다. 이 외에도 로그인, 로그아웃 시 session 정보를 정확히 업데이트하는 방법에 대한 내용이 포함되어 있어 강주호님의 문제 해결에 유용한 인사이트를 제공할 수 있을 것입니다.

저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다.
현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏
추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.

채널톡 아이콘