inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

Next.js 풀스택 Github Issue 서비스 만들기

[sucode] 47. 네비게이션바 리팩토링

로그인 로그아웃 문제

해결된 질문

478

황정연

작성한 질문수 6

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

답변 2

1

황정연

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

0

Su

안녕하세요 황정연님!

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

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

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

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

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

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

마감 인 경우.

0

4

1

MCP 커넥터

0

11

0

전 메모리설정이 안되네요

0

15

1

모든 ts파일이 컴파일 되지 않습니다.(해결됨.)

0

5

3

오류가 나네요

0

19

1

인공지능 개발

0

22

0

71강 보고 있습니다

0

19

1

React 버전업 관련 문의

0

12

1

shripm 설치 폴더

0

21

2

클로드코드 인증코드 입력 오류

0

22

2

버셀로 서버 배포 후 접속 시 500 에러 발생

0

19

2

5장부터는 미션 상세 내용이 없는데 어떻게 작성해야되나요?

0

19

1

데스크탑 앱 작업물 클로드코드 이관

0

27

1

/docs/guide/* 가 어떻게 동작하는 지 궁금합니다.

0

30

2

레퍼런스 사이트를 참고하여 메인페이지 초안만들기 (2:04) 여기에서 막혔어요.

0

29

2

plan task 사용

0

41

2

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

0

431

2

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

2

772

1

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

1

557

1

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

1

309

1

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

0

432

1

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

1

468

1

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

1

373

1

화질개선 가능여부

2

295

1