[Next.js] 쿠키를 이용한 로그인 상태 관리

react-cookie 쉽게 사용하기

react-cookie 쉽게 사용하기

1. npm install react-cookie

2. cookie 관련 함수 모아두는 util 파일 생성

util
|______ cookie.ts

3. set get 함수로 쿠키 관리

import { Cookies } from "react-cookie";

const cookies = new Cookies();

export const setCookie = (name: string, value: string, option?: any => {
	return cookies.set(name, value, { ...option });
})

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

4. 쿠키 util 사용

// setCookie를 통해 쿠키 저장

setCookie('Authorization', token, {
	path: "/",
	secure: true,
	sameSite: "none",
})

setCookie('refreshToken', token, {
	path: "/",
	secure: true,
	sameSite: "none",
})

// getCookie를 통해 쿠키 사용

await axios({
	method: 'get',
	url: '~~~~~~~~~~~',
	headers: {
		Authorization: `${getCookie('Authorization')}`,
		refreshToken: `${getCookie('refreshToken')}`,
	}
})