inflearn logo
강의

Course

Instructor

Creating a Next.js Full Stack Github Issue Service

[sucode] 47. Navigation Bar Refactoring

로그인 로그아웃 문제

Resolved

465

gordon

6 asked

1

똑같이 코드를 구현해봤는대요!

해당문제에서 오류가 발생하고있습니다.

로그인은 잘됐지만 로그아웃에서 아무런 반응이 없다가 쿠키랑 캐시를 지워야지만 로그아웃이 되는 현상이 생겨서 질문을 해봅니다!

 

const AuthStatus = () => {

const { status, data: session } = useSession();

if (status === "loading") return <Skeleton width="3rem" />;

if (status === "unauthenticated")

return <Link href="/api/auth/signin">Login</Link>;

return (

<Box>

<DropdownMenu.Root>

<DropdownMenu.Trigger>

<Avatar

src={session!.user!.image!}

fallback="?"

size="2"

radius="full"

className="cursor-pointer"

referrerPolicy="no-referrer" // 이미지 불러오기 이슈

/>

</DropdownMenu.Trigger>

<DropdownMenu.Content>

<DropdownMenu.Label>

<Text size="2">{session!.user!.email}</Text>

</DropdownMenu.Label>

<DropdownMenu.Item>

<Link href="/api/auth/signout">Logout</Link>

</DropdownMenu.Item>

</DropdownMenu.Content>

</DropdownMenu.Root>

</Box>

);

};

특별히 더 봐야할 부분이 있을까요?

react typescript next.js prisma vercel

Answer 2

1

gordon

해결 완료했습니다! 답변 감사합니다 :)

0

Su

안녕하세요 황정연님!

로그아웃이 제대로 작동하지 않는 문제는 여러 원인으로 인해 발생할 수 있습니다. 제공해주신 코드를 바탕으로, 몇 가지 가능한 원인과 해결 방법을 제안드리겠습니다.

1. 캐시 및 쿠키 관리: 로그아웃이 이루어진 후에도 사용자의 브라우저에 캐시되어 있는 쿠키나 세션 정보 때문에 로그아웃이 제대로 반영되지 않을 수 있습니다.

해결 방법: 로그아웃 처리 후 브라우저에서 캐시된 데이터를 강제로 제거하도록 할 수 있습니다. 예를 들어, 로그아웃 후 페이지를 강제로 새로고침하거나, 서버 측에서 쿠키의 Expires 속성을 과거로 설정하여 브라우저가 쿠키를 자동으로 제거하도록 할 수 있습니다.

2. 서버 사이드 로직 확인: 로그아웃 요청을 처리하는 서버 사이드 로직이 제대로 구현되어 있는지 확인하세요. 로그아웃 요청이 들어왔을 때, 세션을 무효화하고, 쿠키를 제거하며, 필요한 경우 CORS(Cross-Origin Resource Sharing) 정책을 적절히 처리하는지 확인해야 합니다.

3. 네트워크 요청 확인: 개발자 도구의 네트워크 탭을 사용하여 로그아웃 요청이 실제로 서버에 전송되었는지, 그리고 서버로부터 어떤 응답을 받았는지 확인할 수 있습니다. 이를 통해 요청이 예상대로 처리되고 있는지, 문제가 발생한다면 어떤 부분에서 발생하는지 좀 더 구체적으로 파악할 수 있습니다.

위의 점검 사항을 통해 문제를 해결할 수 있기를 바랍니다. 만약 여전히 문제가 해결되지 않는다면, 로그아웃 처리 과정에서의 세부적인 로직이나 서버 사이드의 구현에 대한 추가적인 정보가 필요할 수 있습니다. 참고해주세요! 궁금한게 있으시면 언제든 편하게 질문해주세요! 감사합니다!! 오늘도 좋은 하루 보내세요!!

API Error : 400 에러의 원인과 해결방법이 궁금합니다!!

0

3

1

퍼미션 권한 설정 문의

0

6

1

Next.js + Tanstack Query BFF 구조 질문

0

4

1

커서에서 shift+enter가 안됩니다.

0

15

1

mcp 설치를 못하겠어요

0

22

1

라이브러리 관련 질문 있습니다!

0

15

1

노션 학습 자료 권한 요청

0

10

1

output-styles은 Claude Code의 공식 기능이 아니라고 하는데 혹시 변경된걸까요?

0

17

2

클로드 변경

0

18

1

/config 에서 output-style 을 변경

0

20

1

한국어 문제

0

22

2

part2강의 문의사항입니다.

0

15

2

Node.js 관련 질문드립니다.

0

24

3

클로드 버전업 설치

0

22

2

쿠폰 문의 드립니다.

0

16

2

현재 진행중인 강의에 마케팅 요소를 녹이는 방법

0

36

1

강의 05 디비...질문드려요

0

404

2

이슈 삭제 API delete 요청 오류 반환

2

751

1

vercel 배포후 메인페이지 데이터 연동이 안됩니다

1

539

1

Prisma.issue.findMany라우터 가 아닌 페이지에서 사용 ( in 60. 이슈 필터링 기능 구현 )

1

283

1

서버 사이드 렌더링이 발생하는 이유

0

416

1

개인적으로 궁금함입니다.

1

454

1

react-simplemde-editor 사용시 ReferenceError 가 발생합니다

1

366

1

화질개선 가능여부

2

284

1