React(68) react-cookie 쿠키삭제하고 로그아웃 기능구현하기

 

 

react-cookie 의 활용에 대한 세번째 포스팅이다.

이를 통해 쿠키에 대한 지식과 여러 기능을 구현해보는 좋은 기회가 되었던 것 같다 :) 

 

로그인 / 로그아웃 기능은 모든 웹에서 기초적인 필수기능이라고 생각한다.

그래서 로그아웃 기능은 어려울 줄 알았는데, 프론트에서의 처리는 예상보다 간단....(?) 했다.

그럼 로그아웃을 기능을 구현하러 가보자

 

 

결과화면 미리보기

딱히 미리보기라고 할 것도 없지만 어쨋든 이 버튼을 클릭하면 로그아웃이 될 것이다.

이 텍스트 버튼을 클릭하면 로그아웃이 이루어진다.

 

 

---

React(68) 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>

 

 

 

---

MORE DETAILS 

여기서부터는 더 디테일한 설명을 정리한 섹션이다. 

 

 

단순히 쿠키값만 지우는 거라면 위의 코드가 간단하게 이해가 되었을 거다.

하지만 여기서 킬포는 쿠키값을 코드 단에서 하드코딩으로 넣어주지 않는다 이다.

 

config 파일 안에서 상수화된(고정된) 값을 넣어주고, 그 값을 통해 로그아웃하도록 세팅하였다.

각각의 develop / staging / production 서버를 빌드할 때 사용되는 config(설정) 파일 안에서 

키 값과 URL 을 상수 값(고정 값)으로 선언해주었다.

 

예를 들어

dev-config.js       에서는 LOGIN_KEY_URL = 'dev-devbirdfeet.tistory.com/login' 
staging-config.js 에서는 LOGIN_KEY_URL = 'stage-devbirdfeet.tistorycom/login' 
prod-config.js     에서는 LOGIN_KEY_URL = 'prod-devbirdfeet.tistorycom/login' 

 

이런 식으로 같은 하나의 상수 안에 각각 서버에 따른 url 을 넣어주게 되면

그러면 각각 서버가 실행될 때 바라보게되는 config 의 상수 값에 의해 로그아웃에 필요한 키 값 혹은 URL 이 변경되게 된다.

 

결국 코드단에서 가져다 사용할 때는 그냥 LOGIN_KEY_URL 얘만 가져다 쓰면 되는 것이다.

그래서 하드 코딩으로 했을 때의 오타로 인한 오류 등의 위험 부담이 줄고 재사용성이 높아져 효율적으로 관리를 할 수 있게 된다.