인프런 커뮤니티 질문&답변

황정연님의 프로필 이미지

작성한 질문수

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

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

로그인 로그아웃 문제

해결된 질문

24.02.02 16:21 작성

·

270

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>

);

};

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

답변 2

1

황정연님의 프로필 이미지
황정연
질문자

2024. 02. 02. 19:14

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

0

Su님의 프로필 이미지
Su
지식공유자

2024. 02. 02. 18:27

안녕하세요 황정연님!

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

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

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

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

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

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