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

react-cookie를 이용해 쿠키를 관리하고 이를 통해 로그인 인증을 하는 방법을 알아보겠습니다.

일단 리액트 훅을 사용할 예정이기에 react-cookie를 설치해 줍니다.

yarn add react-cookie

쿠키 훅을 사용하는 방법을 먼저 살펴보면 다음의 형식으로 사용합니다.

const [cookies, setCookie, removeCookie] = useCookies(['쿠키 이름']);

cookies는 쿠키가 들어있습니다.

 

쿠키를 만들고 제거하기 위해선 다음을 사용하는데 옵션은 필요하면 넣을수 있습니다.

setCookie()는 쿠기에 값을 넣을때 

-> setCookie(쿠키 이름, 쿠키에 넣을 값, 옵션)

removeCookie()는 쿠기를 삭제할 때 필요합니다.

-> removeCookie(쿠키 이름, 옵션)

 

이제 예제를 보며 쿠키로 간단한 로그인 인증을 해보겠습니다.

 

먼저 Cookie를 사용하기 위해 CookiesProvider 를 import하고 최상위에서 전체를 감싸줍니다.

(라우터 사용시 BrowserRouter로 감싸는 것과 같습니다.) 

다음 예시를 보겠습니다. 이해가 쉽게 BrowserRouter와 CookiesProvider를 함께 쓰겠습니다.

// index.js

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

ReactDOM.render(
	<React.StrictMode>
		<CookiesProvider> // 쿠키 provider
			<BrowserRouter>
				<App />
			</BrowserRouter>
		</CookiesProvider> / 쿠키 provider
	</React.StrictMode>,
	document.getElementById('root')
);

모든 컴포넌트에서 쿠키를 관리할수 있게 되었습니다.

 

이제 Login 컴포넌트에서 로그인을 하면 토큰을 받아 쿠키에 저장하는 것을 해보겠습니다.

import axios from 'axios';
import React, { useRef } from 'react';
import { useNavigate } from 'react-router-dom';
import { useCookies } from 'react-cookie'; // useCookies import

const Login = (props) => {
	const formRef = useRef();
	const [cookies, setCookie] = useCookies(['id']); // 쿠키 훅 
	const navigate = useNavigate();

	const login = (e) => {
		e.preventDefault();
		axios
			.post('/users/login', { // 로그인 요청
				id: formRef.current.id.value,
				password: formRef.current.passWord.value,
			})
			.then((res) => {
					setCookie('id', res.data.token);// 쿠키에 토큰 저장
			});
	};

	return (
		<form ref={formRef} onSubmit={login}>
			<input type="text" name="id" placeholder="id" required />
			<input type="password" name="passWord" placeholder="passWord" required />
			<input type="submit"></input>
		</form>
	);
};

export default Login;

 

이제 쿠키로 인증을 해보겠습니다.

//check and logout

import axios from 'axios';
import React, { useEffect, useState } from 'react';
import { useCookies } from 'react-cookie';
import { useNavigate } from 'react-router-dom';

const LoginCheck = (props) => {
	const [cookies, setCookie, removeCookie] = useCookies(['id']);
	const [userID, setUserId] = useState(null);
	const navigate = useNavigate();

	const authCheck = () => { // 페이지에 들어올때 쿠키로 사용자 체크
		const token = cookies.id; // 쿠키에서 id 를 꺼내기
		axios
			.post('/users/loginCheck', { token: token }) // 토큰으로 서버에 인증 요청
			.then((res) => {
				setUserId(res.data.id); // 유저 아이디 표시를 위해 작성
			})
			.catch(() => {
				logOut(); // 에러 발생시 실행
			});
	};

	useEffect(() => {
		authCheck(); // 로그인 체크 함수
	});

	const logOut = () => {
		removeCookie('id'); // 쿠키를 삭제
		navigate('/'); // 메인 페이지로 이동
	};

	return (
		<>
			{userID && <h1>{userID}</h1>} // 로그인 되어있으면 아이디 표시
			<button onClick={logOut}>로그아웃</button> // 로그아웃 버튼
		</>
	);
};
export default LoginCheck;

 

이렇게 함으로써 쿠기가 유요하다면 다음을 표시하고 새로고침을 해도 유지됩니다.

하지만 로그아웃 버튼을 누르거나 토큰의 유효기간이 1분이 지나고 새로고침시 logOut() 이 실행되어 쿠키를 지우고 메인 화면으로 이동하게 됩니다.