refresh토큰 사용하기

- 로직설명

현재 진행하는 프로젝트에서 회원가입 또는 로그인을 하면 access-token과 refresh-token을 같이 발급해준다. access-token은 로그인후의 요청들에 필요한 header값으로 넣어줘야하고 access-token의 기간이 만료되었을때 돌아오는 error status에 따른 refresh-token을 보내서 다시 access-token을 발급 받아야 한다.

- axios를 사용한 access-token사용하기

// axios.ts
import axios from 'axios';

const baseURL = process.env.REACT_APP_URL || "http://localhost:8080";

const axiosWithToken = axios.create({
  baseURL,
  headers: {
    'X-AUTH-TOKEN': sessionStorage.getItem('access-token'),
  },
});

1. env파일에 url주소를 넣은 후 주소가 없을시 개발주소로 사용할수있게 세팅한다.
   2.axiosWithToken은 로그인후의 토큰과함께 사용할것이기 때문에 headers에 토큰을 넣어서 세팅하였다.

- refreshToken으로 재발급하기

// axios.ts
axiosAPI.interceptors.response.use(
  (response) => {
    return response;
  },
  (error) => {
    const {
      config,
      response: { status },
    } = error;

    const originalRequest = config;

    if (status === 401) {
      const refreshToken = sessionStorage.getItem('refresh-token');
      axios({
        method: 'post',
        url: `${baseURL}/api/auth/refresh`,
        data: { refreshToken },
      }).then((response) => {
        const accessTokens = response.data.data.accessToken;
        const accessToken = `${accessTokens.header}.${accessTokens.payload}.${accessTokens.signature}`;

        sessionStorage.setItem('access-token', accessToken);

        originalRequest.headers = { 'X-AUTH-TOKEN': accessToken };
        return axios(originalRequest);
      });
    }
    return Promise.reject(error);
  },
);

1. interceptors.response.use를 사용하여 요청의 대한 응답을 가로챈다.
2. error가 없을때는 그냥 return하고 error가 있을경우의 로직을 만든다.
3. access-token만료의 의한 응답코드인 401일경우의 로직을 만든다.
   4.refresh토큰으로 새로운 요청을 보내고 응답에 딸려온 access토큰을 다시 저장한다.
   5.에러응답전에 날렸던 요청의 헤더에 새로운 access토큰을 실어서 axios(originalRequest)로 다시 요청한다.
   6.401에러가 아닌 에러들은 Promise.reject(error)를 통해서 return한다.

(마지막 return을 적지 않아서 다른요청에의한 에러들이 예상과 다르게 작동하는 버그가 생겨 하루종일 삽질을 했다...)