리액트 - refreshToken을 이용한 aceessToken 발급

로그인은 보안 상의 문제로 acceessToken의 만료 기간을 30분 ~ 1시간 정도로 유지한다.

accessToken에는 사용자의 로그인 정보가 암호화 되어 저장하고 있는데, 이 정보를 탈취하면 사용자 외의 외부인도 로그인을 할 수 있다.

하지만 30분마다 로그인을 해야하면 사용자의 불편함을 야기 시키기에, 로그인은 유지 되면서 보안을 높일 방법을 refreshToken을 이용하여 accessToken을 시간이 경과할 때 마다 새롭게 발급하여 로그인을 유지한다.

 

1. 리프레시 토큰 존재 확인

const checkRefreshToken = () => {
    const refreshToken = localStorage.getItem('refreshToken')
}

 

 

2. jwt-decode를 이용하여 accessToken 값을 디코드한다.

npm i jwt-decode

jwt-decode는 노드 패키지 모듈로 터미널에서 다운로드가 필요하다.

import { jwtDecode } from 'jwt-decode'

const checkAccessToken = async () => {
    const accessToken = localStorage.getItem('accessToken'); 
    const decodeToken = jwtDecode(accessToken) // accessTokenExp 디코드 값
    const now = Math.floor(Date.now() / 1000) // 현재 시간
}

변수 decodeToken에 accessToken을 decode하여 저장한다.

변수 now에 현재 시간을 계산하여 저장한다.

현재 시간을 저렇게 계산 하는 이유는 초 단위의 Unix 타임스탬프로 변환하는 작업으로, accessToken의 exp 값이 unix 타임 스탬프 값으로 나타나기 때문에 비교를 위해 따로 계산하여 저장한다.

 

3. 현재 시간이 exp 만료 값을 초과하면 액세스 토큰을 이용하여 재발급한다.

const checkAccessToken = async () => {
    const accessToken = localStorage.getItem('accessToken'); 
    const decodeToken = jwtDecode(accessToken) // accessTokenExp 디코드 값
    const now = Math.floor(Date.now() / 1000) // 현재 시간

    if(now > decodeToken.exp){
      await getAccessToken();
    }
}

 

getAccessToken()은 리프레시 토큰을 재발급 하는 함수이며 아래와 같이 쓰여있다.

const getAccessToken = async () => {
    try{
      const refreshToken = localStorage.getItem('refreshToken');
      const response = await axios.post("/refreshToken", {
          'refresh_token' : refreshToken
      })

      const newAccessToken = response.data.data.token
      localStorage.setItem('accessToken', newAccessToken)
    } catch(error){
      console.log('Error Occured: ', error)
    }
}

먼저 refreshToken을 재 발급하고, 변수 newAccessToken에 refreshToken을 이용하여 새로운 accessToken을 재발급하여 로컬스토리지에 새로 저장한다.

 

4. 페이지 이동 시마다 함수를 실행시켜 토큰을 확인한다.

import { useLocation } from 'react-router-dom';

const location = useLocation() // 페이지 이동 시에 토큰 확인

useEffect(() => {
checkAccessToken()
}, [location])

useLocation은 react-router-dom의 함수로 url 주소가 바뀔 때마다 함수를 호출하여 accessToken 값을 확인하고 재발급 받을 수 있다.

 

 

위의 과정을 거치면 accessToken을 재발급하여 로그인 중에도 번거롭게 재로그인을 하지 않고 사이트를 이용 할 수 있다.