accesstoken, refreshtoken

인증서버에서 JWT를 이용하고 있음.
서버에 요청시 header에 accesstoken 담고 기간 만료되면 refreshtoken을 이용해서 accesstoken을 재발급 받도록 구현해야한다.

순서

1. aioxs의 interceptors를 이용하여 accesstoken을 header에 넣어 요청한다.
2. accesstoken이 만료가 되었으면 refreshtoken을 이용해 accesstoken을 재발급 받는다.
3. refreshtoken이 만료되었다면 토큰을 지우고 로그인 페이지로 이동한다.

1. axios 설치

npm i axios

2. axios 인스턴스 생성

import axios from 'axios';

export const axiosAPI = axios.create({
  headers: {
    Authorization: '',
  },
  timeout: 10 * 1000, # 10초동안 응답이 안오면 에러
});

3. axios interceptors

axiosAPI.interceptors.request.use(
  async (config) => {
    // 요청이 전달되기 전에 작업 수행
    const userToken = getItem(LOGIN_TOKEN);

    if (userToken) {
      const { accessToken, refreshToken } = userToken;
      const accessTokenAtob = window.atob(accessToken.split('.')[1]);
      const accessTokenInfo = JSON.parse(accessTokenAtob);
      const { exp: accessTokenExp } = accessTokenInfo;
		
      // accesstoken 유효성 검사 판단
      if (new Date() > new Date(accessTokenExp * 1000)) { 
        if (refreshToken) { 
          const refreshTokenAtob = window.atob(refreshToken.split('.')[1]);
          const refreshTokenInfo = JSON.parse(refreshTokenAtob);
          const { exp: refreshTokenExp } = refreshTokenInfo;
          
          // refreshtoken 유효성 검사 판단
          if (new Date() < new Date(refreshTokenExp * 1000)) {
            // 재발급
            try {
              const { data } = await axios({
                url: '/api/auth/v1/access-token',
                method: 'GET',
                headers: {
                  Authorization: refreshToken,
                },
              });
              const { accessToken: newToken } = data;
              config.headers.Authorization = newToken; // 토큰 업데이트
            } catch (e) {
              const err = e;
              console.log(1);
              removeItem(LOGIN_TOKEN);
              window.location.replace('/');
            }
          } else {
            console.log(2);
            removeItem(LOGIN_TOKEN);
            window.location.replace('/');
          }
        } else {
          console.log(3);
          removeItem(LOGIN_TOKEN);
          window.location.replace('/');
        }
      } else {
        // 유효하면 헤더에 넣기
        config.headers.Authorization = accessToken;
      }
    }

    return config;
  },
  (error) => {
    // 요청 오류가 있는 작업 수행
    return Promise.reject(error);
  },
);