[React] react-cookie를 이용해 쿠키 관리하고 로그인 인증하기

이번 펠로우쉽 프로젝트에서 jwt 인증을 통한 로그인 기능을 구현해야 하기 때문에 프론트에서는 react-cookie를 이용해 쿠키에 accesstoken을 저장하여 관리하고, 로그인 인증을 수행하려 한다.

🔆 react-cookie라이브러리 설치

npm install react-cookie

🔆 쿠키 사용하기

• Cookie를 사용하기 위해 CookiesProvider를 import 하고 최상위에서 전체를 감싸주어야함

import React from "react";
import ReactDOM from "react-dom/client";
import App from './App';
import { CookiesProvider } from "react-cookie";

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
    <React.StrictMode>
        <CookiesProvider>
            <App />
        </CookiesProvider>
    </React.StrictMode>
);

🔆 쿠키를 다루는 데 필요한 함수를 하나의 모듈에 정의

하나의 모듈에 쿠키 관련 함수를 정의하여, 다른 파일에서 임포트하여 사용함으로써 코드의 재사용성과 유지보수성이 향상됨

• 생성: setCookie(쿠키 이름, 쿠키에 넣을 값, 옵션)
• 조회: getCookie(쿠키 이름)
• 삭제: removeCookie(쿠키 이름)

import {Cookies} from 'react-cookie'

const cookies = new Cookies();

export const setCookie = (name, value, options)=>{

	return cookies.set(name, value, {...options})
}

export const getCookie = (name)=>{
	return cookies.get(name)
}

export const removeCookie = (name)=>{
	return cookies.remove(name, { path: '/'})
}

• Path (경로): 쿠키를 서버로 전송할 URL 경로를 나타냄. 쿠키는 해당 경로와 하위 경로에서만 사용할 수 있음. path: '/'로 설정하면 쿠키는 웹 애플리케이션의 모든 경로에서 사용 가능하며, path: '/auth'로 설정하면 /auth 경로와 그 하위 경로에서만 사용 가능.

🔆 컴포넌트에서 쿠키 함수 사용하기

• 로그인 시 accesstoken을 쿠키에 저장

const onSubmit = async (data) => {
    console.log(data);
    try {

      const response = await api.post('/api/users/login', data, {withCredentials: true});
      if (response.data.status==="SUCCESS") {

        console.log(response.data.status);
        const accessToken = response.data.data.accessToken;

        // API 요청하는 콜마다 헤더에 accessToken 담아 보내도록 설정
		axios.defaults.headers.common['Authorization'] = `Bearer ${accessToken}`;
        setCookie("accessToken", accessToken, {path: '/' });
        
        console.log(document.cookie);
        onLogin(); //로그인 핸들러 호출

        //쿠키 저장 완료되면, 로그인 성공하였으므로 메인페이지 이동 
        navigate('/') 
      }
    } catch (error) {
      if(error.response.data.status==500){ //아이디, 비밀번호가 틀렸을 때 
          alert('아이디 또는 비밀번호가 틀렸습니다.');
          reset();
      }
    }

• 로그아웃 시 쿠키 삭제

  //로그아웃 핸들러
  const handleLogout = () => {
         //쿠키 삭제
        removeCookie('accessToken');
        onLogout(); //로그아웃 핸들러 호출 
        navigate('/')
  }

• 로그인 여부 인증 시 쿠키 조회

const CheckLogin = () => {
    //쿠키를 이용해 로그인 여부 판단 
    if(getCookie('accessToken') && getCookie('accessToken') !== "undefined"){
      return true;
    }else{
      return false;
    }
}

(참고)
https://jrepository.tistory.com/65
https://velog.io/@leitmotif/Auth-적용하기#-로그인-검증---react