[React] react-cookie 로 로그아웃 기능 구현하기

 

 

쿠키삭제 후 로그아웃 기능구현하기

 

쿠키 값 삭제 후,  로그인 페이지로 되돌아가는 로그아웃 버튼을 구현해보자.

보통은 url을 통해 로그아웃  페이지만 이동하면 거기서 쿠키를 지워주게 되고 메인페이지로 리다이렉트를 친다.

하지만 이번 케이스는 쿠키를 따로 지워준 후 로그아웃 url 로 redirect 해주었다.

 

import { useCookies } from 'react-cookie'; // 리액트 쿠키 임포트

 

const COOKIE_KEY = window.LOGIN_KEY; // 상수화시킨 쿠키 값을 넣어줬다.

const logoutURL = 			     // 리다이렉트할 URL 을 상수화시켜서 넣어주었다.
  window.LOGIN_SESSION_KEY_URL + `/logout?redirect_uri=${window.location.href}`;
  
const [, , removeCookie] = useCookies([COOKIE_KEY]); // 쓰지 않는 변수는 (공백),처리해주고 removeCookie 옵션만 사용한다.

 

 const handleLogout = () => {			// 로그아웃 버튼을 누르면 실행되는 함수
    removeCookie(COOKIE_KEY, { path: '/' });    // 쿠키삭제후
    window.location.href = logoutURL;		// 현재url을 변경해준다.
  };

 

<div className="logout" onClick={handleLogout}>
  로그아웃
</div>