실전 프로젝트에서 로그인 및 회원가입 파트를 담당하게 되었다. 그 과정에서 난 React-cookie와 jwtDecode라는 라이브러리를 이용해서 처리하려고 했다.

React-Cookie와 jwtDecode

React-Cookie 사용법

import { Cookies } from 'react-cookie'

const cookie = new Cookies()

기본적으로 쿠키는 key와 value형태로 이루어져 있다.
위와 같이 생성자 함수로 cookie 객체를 만들면, set()과 get()을 통해서 jwt토큰을 저장할 수 있고, 가져와서 사용할 수도 있다.

jwt 토큰 관련 함수들

먼저 다른 프론트엔드 팀원분께서 말씀하시길, 토큰을 저장하고 가져오는 곳이 생각보다 많을것 같아서 함수로 만들어서 관리하면 좋을 것 같다고 하여 함수로 따로 만들어서 관리했다.

import { Cookies } from 'react-cookie'

const cookie = new Cookies()

// 쿠키의 key값에 접근해서 그 토큰을 가져와 사용할 수도 있다.
export const onGetCookieHandler = (name: string) => {
  return cookie.get(name)
}

export const onGetLocalStorage = (name: string) => {
  return localStorage.getItem(name)
}

// onSetCookieHandler 함수로 key에 name을, value에 authId를 
export const onSetCookieHandler = (name: string, authId: string) => {
  return cookie.set(name, authId)
}

export const onSetLocalStorageHandler = (
  name: string,
  decodedUserInfo: any
) => {
  return localStorage.setItem(name, decodedUserInfo)
}

export const onLogoutHandler = (name:string) => {
    return cookie.remove(name)
}

export const onRemoveToken = (decodedUserInfo:any) => {
  return localStorage.removeItem(decodedUserInfo)
}

로그인 처리

const onClickLoginHandler = () => {
    if (!id || !password) return
    login({ id: id, password: password })
      .then((res) => {
        const authId = res.data.token
        const decodeUserInfo = JSON.stringify(jwt_Decode(authId)) // jwt_Decode는 백엔드에서 보내준 jwt 토큰을 간편하게 복호화해주는 역할을 한다.
        onSetCookieHandler('authorization', authId) // api 통신을 통해 가져온 토큰을 authorization이라는 key에 저장
        onSetLocalStorageHandler('authorization', authId)
        onSetLocalStorageHandler('userInfo', decodeUserInfo)
        navigate('/recommend')
      })
      .catch((error) => {
        console.log(error)
      })
  }