Vue - axios 통신을 위한 파일 구조화

axios 통신을하며 공통적으로 사용할 소스를 모듈화 시켯다.

 

1. Http.js

axios를 create하는 파일이며 auth가 필요한 경우와 필요하지 않은 경우로 구분하여 작성하였다.

- auth가 필요하지 않은경우 instance를 export 시킴

- auth가 필요한 경우 setInterceptors라는 함수에 instance를 리턴하며 instancewithAuth를 export 시킨다.

- baseURL : axios요청을 보낼 도메인 주소이다. baseURL에 대한 설명은 아래링크 클릭!!

https://sikk.tistory.com/manage/posts/

 

// axios를 사용하는데 공통으로 쓸 것들을 모아논 파일
// HTTP Request & Response와 관련된 기본 설정

import axios from 'axios';
import setInterceptors from './Interceptors'

// 인증이 필요없는 통신시 사용할 파일에서 import 하여 사용
function createInstance() {
  const instance = axios.create({
    baseURL: process.env.VUE_APP_API
  });
  return instance;
}
export const instance = createInstance();

// 인증이 필요한 통신시 사용할 파일에서 import 하여 사용
function createInstanceWithAuth() {
  const instance = axios.create({
    baseURL: process.env.VUE_APP_API
  });
  //interceptors 사용(accessToken, refreshToken)
  return setInterceptors(instance);
}
export const instanceWithAuth = createInstanceWithAuth();

 

2. Interceptors.js (setInperceptors를 export하며 Http.js 파일에서 사용)

- 파라미터로 Http.js 파일에서 보내주는 instance를 이용한다.

- axios에서 제공하는 interceptor는 request, response 시에 사용된다.

- request 시에는 헤더에 토큰을 담아 보내는 경우 등에 사용하면 될 것 같다.

- response 시에는 토큰이 만료됫을 경우 리프레쉬 토큰을 사용하는 로직을 넣으면 될 것 같다. 혹은 에러메세지

import store from '@/store';

// Http.js 파일에서 axios를 사용할 때 사용
function setInterceptors(instance) {
  instance.interceptors.request.use(

    async function(config) {
      // 요청 보내기 전에 제어할 부분
      // store -> sampleAuth파일에 저장된 토큰이 있으면
      if (store.state.Auth.token !== null) {
        // 헤더에 토큰을 담아서 전송
        config['headers'] = {
          Authorization: `Bearer ${store.state.Auth.token}`
        }
      }
      return config;
    },
    function(error) {
      // 요청 시 에러 처리
      return Promise.reject(error)
    },
  );

  // Add a response interceptor
  instance.interceptors.response.use(
    function(response) {
      // 토큰 만료시 리프래쉬 시키는 로직도 추가해야함
      // 에러메세지 처리도 해주는게 좋을 것 같음 Vuex에 message.js Vuex파일을 만들어서 관리해도 좋을 것 같음
      return response;
    },
    function(error) {
      return Promise.reject(error);
    },
  );

  return instance;
}

export default setInterceptors;

 

3. Index.js 

- axios를 호출하는 공통 모듈이다. auth가 필요한경우와 필요하지 않은경우로 구분하였다.

- auth가 필요하지 않은 경우 -> axiosCommon함수 사용

- auth가 필요한 경우 -> axiosCommonWithAuth함수 사용

- 위 두가지 함수는 파라미터로 api url, method 방식, 전송할 data를 받아온다.

// Http.js 파일에 있는 것 임포트해옴
// instance => 인증이 필요없는 로직에서 사용
// instanceWithAuth => 인증이 필요한 로직에서 사용
import { instance, instanceWithAuth } from './common/Http';
// Vuex Store를 사용하기 위해 임포트

// api 호출을 공통 모튤로 커버
// auth가 필요하지 않을 경우 호출
// 파라미터에 데이터, 메서드방식(get, post), api주소,
function axiosCommon(url, method, data) {
  if(method === 'post') {
    return instance.post(url, data);
  }
  // method가 get일시 아래 로직 실행
  else {
    return instance.get(url, data)
  }
}

// api 호출을 공통 모튤로 커버
// // auth가 필요할 경우 호출
// 파라미터에 데이터, 메서드방식(get, post), api주소,
function axiosCommonWithAuth(url, method, data) {
  if(method === 'post') {
    return instanceWithAuth.post(url, data);
  }
  // method가 get일시 아래 로직 실행
  else {
    return instance.get(url, data)
  }
}

// 만들어논 api export
// api를 사용할 vue 파일에서 import 해서 사용하면 됨
// 예시 로그인 api 사용 -> import {axiosCommon} from '@/api/Index.js'
export {
  axiosCommonWithAuth,
  axiosCommon
}

 

만들어논 모듈을 사용하는 것은 다음글에서 진행하겠습니다!! 아래링크 클릭

https://sikk.tistory.com/57