[Vue] interceptors(인터셉터) 구현으로 axios 통신 공통으로 관리하기

axios 문서 https://axios-http.com/kr/docs/interceptors

인터셉터 | Axios Docs

 

 

axios를 활용한 통신이 많아지다보면 통신 전처리, 후처리에 대한 고민이 쌓여만간다..

interceptors는 원래는 요청이 주고받을때 통신 틈새에 액션을 취하는 역할이지만 ㅎㅎ 작업을 하다보니  interceptors 를 에러 핸들러에 이용하는 편이다. (굉장히 편리하다 !! 정말 유용하게 쓰는중)

 

물론 이런 역할 이외에도 다양하게 활용이 가능하다

 

 

src/api/index.js

import axios from "axios";

import { setInterceptors } from "./interceptors";

function createAxiosService() {
  const axiosService = axios.create({
    baseURL: process.env.VUE_APP_API_URL,
  });

  return setInterceptors(axiosService);
}

//axiosService로 사용이 가능하다
export const axiosService = createAxiosService();

 

 

src/api/interceptors.js

import store from "@/store";
import route from "@/router";

export function setInterceptors(axiosService) {
  axiosService.interceptors.request.use(
    function (config) {
      config.headers.Authorization = `Bearer ${store.state.account.token}`;
      // 요청을 보내기 전에 처리
      return config;
    },
    function (error) {
      // 요청이 잘못되었을 때 에러가 컴포넌트 단으로 오기 전에 처리
      return Promise.reject(error);
    }
  );

  axiosService.interceptors.response.use(
    function (response) {
      // 응답을 받기 전에 처리
      return response;
    },
    function (error) {
      // 응답이 에러인 경우에 미리 전처리할 수 있다.
      if (error.response.status === 401) {
        if (route.app._route.name !== "LoginView") {
          location.reload();
        } else {
          store.commit("controller/setMsg", "로그인정보를 다시 확인해주세요");
        }
      } else if (error.response.status === 405) {
        store.commit("controller/setMsg", "서버오류! 관리자에게 문의하세요");
      
      return Promise.reject(error);
    }
  );

  return axiosService;
}

 

 

 

src/components/test.vue

...
<script>
import { axiosService } from "@/api/index";

...
methods: {
      autoSetKeyword(val) {
        axiosService(`axios/url/test`)
          .then((res) => {
          console.log('통신')
      	})
      },

}
</script>