JWT 기반 인증 로그인 구현하기 - (3)

이제 본격적으로 토큰을 저장해보겠다.

저번글에서 토큰을 쿠키에 저장하기로 결정했는데,
React에서 쿠키를 쉽게 다룰 수 있도록 도와주는 라이브러리인 react-cookie를 이용해 토큰을 저장해보겠다.

1. 패키지 다운

먼저 패키지를 다운받아준다

npm install react-cookie

yarn add react-cookie

2. Cookies.js 파일 생성

Cookie.js라는 파일을 만들어주고 3개의 함수를 작성해주었다.

• setCookie : 쿠키를 저장하는 함수

• getCookie : 쿠키 정보를 가져오는 함수

• removeCookie : 쿠키를 삭제하는 함수

import { Cookies } from "react-cookie";

const cookies = new Cookies();

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

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

export const removeCookie = (name, option) => {
  return cookies.remove(name, {...option});
}

3. Cookie에 토큰 저장하기

로그인 시 로그인이 성공한 부분에 밑에 코드를 작성해주었다.
setCookie 함수를 이용해 token이라는 이름으로 백엔드에서 원하는 형식으로 반환된 토큰을 저장해주었다.
option에는 각 알맞은 option을 넣어주었다.

• path : 쿠키 값을 저장하는 서버 경로로, 보통 /을 사용

• sameSite : 쿠키가 어떤 상황에서 전송되는지 제어하는데 사용되며
                none, lax, strict 3가지 값이 사용된다.

• secure : 이 속성이 true일 시, 웹브라우저와 웹서버가 HTTPS로 통신하는 경우에만 쿠키가 저장됨

• httpOnly : 이 속성이 true일 시, document.cookie로 쿠키에 비정상적으로 접속하는 것을 막아줌

const token = response.data.token;
      if(token){
        setCookie("token", `JWT ${token}`, {
          path: "/",
          sameSite:'strict',
          // secure: true,
          // httpOnly: true,
        })
      }

아직 배포하지 않고 개발중이어서 secure과 httpOnly는 잠시 주석 처리를 해주었다.
나중에 sameSite값도 none로 바꿔주어야한다.
왜냐하면 지금은 strict로 쿠키가 동일 출처에서만 전송되게 하였지만 none으로 바꿔줌으로써 동일한 출처 뿐만 아니라 다른 출처에서 전송되는 상황에서도 쿠키가 전송되게 해준다.

document.cookie

console창에 위의 코드를 입력해 쿠키에 토큰값이 잘 저장되었는지 테스트해보니
잘 저장되었음을 확인해 볼 수 있었다.

3. Header에 Token 넣어주기

지금까지는 axios 라이브러리를 필요 시에 그대로 가져다 사용했었는데
새로운 파일에 axios 인스턴스를 생성하고 이를 export해서 프로젝트 진행시 필요할때마다 사용할 수 있도록 수정해주었다.

import axios from "axios";
import { getCookie } from "../hooks/Cookies";

const instance = axios.create({
  baseURL: 'https://openmarket.weniv.co.kr/',
});

instance.interceptors.request.use((config) => {
  const token = getCookie('token');
  try {
    if(token){
      config.headers.Authorization = token;
    }
    return config;
  } catch (error) {
    console.error('axios.interceptors.request: ', error);
  }},
  (error) => {
    return Promise.reject(error);
  }
)

export default instance

axios에서 제공하는 interceptors 기능을 이용해 토큰값을 Headers의 Authorization에 넣어주었다.

Axios Interceptors란❓
요청(config)을 보내거나 받을 때마다 라이브러리가 호출하는 함수로,
then 또는 catch로 처리되기 전 요청이나 응답을 가로챌 수 있다.

잘 들어갔음을 확인할 수 있다.

---

참고
https://velog.io/@plutoin/react-cookie
https://frontdev.tistory.com/entry/Axios-%EC%9D%B8%ED%84%B0%EC%85%89%ED%84%B0%EB%A5%BC-%EC%82%AC%EC%9A%A9%ED%95%98%EB%8A%94-4%EA%B0%80%EC%A7%80-%EB%B0%A9%EB%B2%95
https://suhyeon-developer.tistory.com/12