[React] Cookie + JWT + axios 이용하여 JWT 인증하기.

오늘은 React로 axios와 cookie를 활용하여 JWT를 구현해보자.

 

순서는 아래의 이미지와 같다.

1. 로그인 요청

2. AccessToken 응답

3. AccessToken을 Cookie에 저장

4. API 요청 보낼 때 Header에 AccessToken을 담아서 보냄.

5. 서버는 Header의 AccessToken을 이용하여 인증 후 응답.

 

 

Vite React Tree

 

먼저 Cookie.tsx에서 Cookie 관련 기능을 만들어둔다.

react-cookie 모듈을 이용하여 쿠키를 생성, 조회, 삭제 기능을 모듈화하여 타 컴포넌트에서 사용을 용이하게 작성한다.

 

1. setCookie : 키와 값을 받아서 새로운 쿠키를 생성하고 저장한다.
2. getCookie : 키를 받아서 값을 반환한다.
3. removeCookie : 키를 받아서 해당 되는 쿠키를 삭제한다.

로그인 할 때 setCookie로 응답 받은 AccessToken을 저장하고, API 요청을 보낼 때 Header에 getCookie를 이용하여 AccessToken을 요청 메세지에 담는다.

 

로그아웃을 할 때는 removeCookie로 기존의 쿠키를 삭제하게된다.

[src/common/Cookie.tsx]

import { Cookies } from 'react-cookie'

const cookies = new Cookies()

/** Key, Value를 받아 Cookie 생성 후 저장
 * @param {string} name
 * @param {string} value
 */
export const setCookie = (name: string, value: string) => {
  return cookies.set(name, value, { maxAge: 60 * 60 * 3, path: '/' })
}

/** Key를 받아 Value를 반환
 * @param {string} name
 * @returns {string}
 */
export const getCookie = (name: string) => {
  return cookies.get(name)
}

/** Key를 받아 쿠키를 삭제
 * @param {string} name
 */
export const removeCookie = (name: string) => {
  return cookies.remove(name)
}

 

axios에 계속 같은 설정으로 요청을 보내야하면, 요청을 할 때 마다 적는 것이 아닌 default 설정을 하거나 아래와 같이 설정을 가지고 있는 axios를 모듈로 만들어서 사용한다.

 

우리는 AxiosC라는 이름의 커스텀 모듈로 사용할 거고, 사용 방법은 axios와 동일하지만 Header에 getCookie를 활용해 AccessToken을 담아서 요청 메세지를 보낸다.

[src/common/AxiosC.tsx]

 

import axios from 'axios'
import { getCookie } from './Cookie'

export default axios.create({
  headers: {
    accessToken: await getCookie('accessToken'),
  },
})

 

간단한 페이지를 만들어보자.

두 개의 버튼이 있으며, 하나의 버튼(Login)은 서버에 email, pw를 담은 정보로 로그인을 하여 응답을 받는 이벤트가 연결되어있고, 다른 하나(Logout)의 버튼에는 로그아웃 이벤트를 연결해보자.

 

먼저 useState와 onChange를 활용하여 유저가 Input에 입력한 데이터(상태)를 관리한다.

 

그리고 Login 버튼을 누르면, 로그인 응답을 받아오게 되고 그 응답에는 JWT Token이 있다. 로그인을 성공적으로 하면 응답 받은 JWT Token을 setCookie를 활용하여 쿠키에 저장한다.

 

Logout 버튼을 누르면, 브라우저에 저장된 token인 쿠키를 제거한다.

[src/App.tsx]

import { useState } from 'react'
import AxiosC from './common/AxiosC'
import { removeCookie, setCookie } from './common/Cookie'

export default function App() {
  const [user, setUser] = useState({ email: '', pw: '' })

  /** Get User Login Info */
  const onChange = async (event: any) => {
    const { name, value } = event.target
    setUser({
      ...user,
      [name]: value,
    })
  }

  /** Get Login Response from Server */
  const clickBtnLogin = async () => {
    const config = {
      method: 'post',
      url: 'http://localhost:8000/api/auth',
      data: user,
    }
    const { data } = await AxiosC(config)
    setCookie('accessToken', data.token)
  }

  /** Logout */
  const clickBtnLogout = async () => {
    removeCookie('accessToken')
  }

  return (
    <div>
      <input
        onChange={onChange}
        name="email"
        type="text"
        placeholder="Enter Ur Email"
      />
      <input
        onChange={onChange}
        name="pw"
        type="password"
        placeholder="Enter Ur pw"
      />
      <button onClick={clickBtnLogin}>LOGIN</button>
      <button onClick={clickBtnLogout}>LOGOUT</button>
    </div>
  )
}

 

결론

1. 로그인 응답으로 보낸 JWT를 setCookie이용하여 브라우저에 쿠키로 저장

2. API에 요청을 보낼 때 AxiosC와 getCookie를 활용해 Header에 응답 정보인 JWT를 같이 보낸다.

3. 로그아웃을 하면 쿠키에 저장된 것을 getCookie를 활용하여 삭제한다.