[JS] axios interceptors 를 이용해 token만료시 refreshToken 자동요청하기.

[JS] axios interceptors 를 이용해 token만료시 refreshToken 요청하기.

안녕하세요. 이번 포스팅에서는, token이 만료됐을 때 refreshToken을 자동으로 요청 하기 위한
axios interceptors 설정에 대해 알아보겠습니다.

과정

• 요청성공시
  • return
• 요청실패시 ( 토큰 만료로 인한 에러 발생시)
  • 에러를 반환하기 전에 interceptor 해서, 서버에 token refresh를 요청합니다.
  • token refresh요청을 통해 받은 새로운 accessToken을 ReduxStore등 본인이 이용하는 저장소에 저장합니다.
  • 새로운 accessToken을 header에 담아, 재요청합니다.
• 코드 예시

axios.interceptors.response.use(
      response => {
        return response;
      },
      async error => {
        const {
          config,
          response: {status},
        } = error;
        if (status === 419) {
          if (error.response.data.code === 'expired') {
            const originalRequest = config;
            const refreshToken = await EncryptedStorage.getItem('refreshToken');
            // token refresh 요청
            const {data} = await axios.post(
              `${Config.API_URL}/refreshToken`, // token refresh api
              {},
              {headers: {authorization: `Bearer ${refreshToken}`}},
            );
            // 새로운 토큰 저장
            dispatch(userSlice.actions.setAccessToken(data.data.accessToken));
            originalRequest.headers.authorization = `Bearer ${data.data.accessToken}`;
            // 419로 요청 실패했던 요청 새로운 토큰으로 재요청
            return axios(originalRequest);
          }
        }
        return Promise.reject(error);
      },
    );