TIL-23.05.08

 

문제점

axios를 통한 서버통신을 위해, 반복 사용되는 통신 메소드를 한 파일로 따로 모아 axios.create를 이용해 작성해놓았다.

필요할때마다 해당 파일에서 불러와 사용하면 효율적이기 때문이다. 

그러나 오늘 기술매니저님께 한가지를 지적받았다. 유저인증을 위해서 header에 Authorization키에 value로 토큰값을 넣어주는데

로그인,회원가입 시에는 해당 값이 필요없으므로 axios.create를 헤더의 유무에 따라 2개로 나눠작성한것을 지적받은것이다.

매니저님께서 제안해주신것은 axios interceptors를 활용해서 하나의 create로 만들라는것!

문제는 여기이다 ...내가 interceptors에 대한 지식이 없었다는것

 

 

 

 

시도한것

axios interceptors를 사용하기 위한 사용법을 관련 자료들을 보며 익히기 시작했다.

크게 request , response 두개로 나뉘는데 

intance.interceptors.request.use(

(config)=>{

    요청 성공 직전 호출되는 구역

return config}, error=> {

    요청 에러 직전 호출되는 구역

return Promise.reject(error)} ) 

 

 

intance.interceptors.response.use(

(response)=>{

    http status가 200인 경우

    응답 성공 직전 호출되는 구역  

    .then()으로 이어짐

return config}, error=> {

    http status가 200이 아닌 경우

    응답 에러 직전 호출되는 구역

    .catch()으로 이어짐

return Promise.reject(error)} ) 

 

따라서 기존에 2개로 나눠 작성했던 axios create를 1개로 통합했다

import axios from 'axios';
import Cookies from 'js-cookie';
import { PATH_URL } from '../shared/constants';

const API_URL = process.env.REACT_APP_SERVER_URL;

export const api = axios.create({
  baseURL: API_URL, //백엔드 서버 들어올 예정
});

api.interceptors.request.use(
  config => {
    const token = Cookies.get('token');

    if (token) {
      config.headers.common['Authorization'] = `Bearer ${token}`;
    }
    return config;
  },
  error => {
    console.log(error);
    return Promise.reject(error);
  }
);
api.interceptors.response.use(
  response => {
    return response;
  },
  error => {
    if (error.status === 401) {
      alert('재로그인이 필요합니다');
      window.location.href(PATH_URL.LOGIN);
    }
  }
);

요청시 쿠키에 토큰이 있다면(로그인 상태) 유저인증을 위해 헤더에 토큰값을 담아 서버 요청을하고, 

쿠키에 토큰이 없다면 없는 상태로 요청을 하게끔 작성하니 굳이 2개로 나눠작성할 필요가 없어졌다.

또한 response의 status가 401이라면 request에 대한 유효한 인증자격증명이 없기 때문이므로 재로그인을 하도록 리다이렉션시켰다.

 

 

 

알게된점

axios를 통한 서버통신 시 요청 직전,직후 / 응답 성공 직전, 실패 에러 직전 에 실행한 코드를 작성해놓을 수 있는 interceptors라는 존재를 알게되었고, 이를 활용하면 실제로 요청시 에러발생 상황이나, 응답시 에러발생 상황에 대한 컨트롤이 더 효율적으로 가능할것같다는 생각이 들었다. 앞으로 실제 요청을 진행해놓고 try-catch로 에러를 컨트롤하기보단 에러가 발생할수있는 염려사항을 미리 이렇게 작성해놓으면 좋겠다는 생각이다