[vue] vue에서의 axios 요청 / axios.create() / interceptors

각 컴포넌트에서 axios 요청을 일일이 보내는 것보다 api 로직은 따로 빼는 게 나중에 수정하기도 찾아쓰기도 편하므로 분리해주는 게 좋다.

 

프로젝트를 할때마다 서버쪽 API에 axios 요청 보낼때마다 base url은 같은데 이걸 계속 반복해서 갖다쓰는게 불편했는데, axios.create()를 쓰면 됐다. 

 

axios.create()

axios 공통 설정 (config - baseURL 과 같은 부분)을 create 메소드를 통해 인스턴스화해준다.

 

- baseURL : 반복되는 도메인을 넣는다.

- headers : request Header의 내용을 만져줄수있다 

     > Authorization 속성 : 토큰값을 넣어주는 등의 방식을 취할 수 있다.

// src/api/index.js

import axios from 'axios';

const instance = axios.create({
  baseURL: process.env.VUE_APP_API_URL,
  headers: {
    Authorization: 'token값 넣기'
  }
})

function registerUser(userData) {
  // const url = 'http://localhost:3000/signup';
  // return axios.post(url, userData);
  // 중복 코드를 줄이기 위해 아래와 같이 수정
  return instance.post('signup', userData);
}

export { registerUser };

 

axios.interceptors

axios 요청 가로채기

axios 요청을 던지기 전이라던가 응답을 받기 전 그 중간에 뭔가를 실행할 때 쓰면 매우 유용하다.

axios.interceptors.request.use()

axios.interceptors.request.use(function(config) {
// 요청 보내기 전 실행할 코드 작성
   config.headers.Authorization = store.state.token;
   // 요청 헤더 - Authorization 속성을 업데이트해서 요청을 보낸다.
   console.log(config) // 아래 캡쳐 확인
   return config;
}, function(error) {
   // 요청 에러에 대한 코드 작성
   return Promise.reject(error);
})

axios.interceptors.response.use()

axios.interceptors.response.use(function(config) {
// http 상태코드 200에 대한 응답데이터를 가지고 뭔가를 실행할 코드 작성
    return config;
}, function(error) {
// 응답 에러에 대한 코드 작성
    return Promise.reject(error);
})

 

request 시 첫번째 함수의 인자로 받는 config를 콘솔창에 찍어보았더니 아래와 같이 나왔다. 

axios.interceptors.request.use() - config 콘솔 결과

 

axios 요청 보내기전 interceptors를 활용하여 요청 헤더 상에 Authorization 설정을 해주자.

// src/api/common/interceptors.js

import store from '@/store/index';

export function setInterceptors(instance) {
    instance.interceptors.request.use(
        function(config) {
            config.headers.Authorization = store.state.token;
            return config;
        },
        function(err) {
            return err;
        }
    );
    instance.interceptors.response.use(
        function(config) {
            return config;
        },
        function(err) {
            return err;
        },
    );
    return instance;
}

 

 

 

 

axios 요청은 크게 2개로 나눠줄 수 있다. 

1 - headers안에 Authorization이 없어도 되는 요청 (회원가입, 로그인 같은 경우)

2 - 로그인 후에 headers-Authorization token을 품고 요청을 해야만 하는 경우이다.

 

그래서 2개의 axios instance를 리턴해주는 함수를 만들었다.

// src/api/index.js

import axios from 'axios';
import { setInterceptors } from './common/interceptors';

// auth 없는 일반 axios instance 리턴
function createInstance() {
    return axios.create({
    	baseURL: process.env.VUE_APP_API_URL;
    });
}

// 토큰 품은 header를 가지고 요청하는 axios instance 리턴
function createInstanceWithAuth(url) {
    const instance = axios.create({
    	baseURL: `${process.env.VUE_APP_API_URL}${url}`
    });
    
    return setInterceptors(instance);
}

export const instance = createInstance();
export const post = createInstanceWithAuth('posts'); // localhost:3000/posts/로 요청을 보냄

 

위에서 만든 axios 인스턴스를 가지고 서버에 요청을 날리면 된다!

 

1 - 그냥 axios 요청

// src/api/auth.js

import { instance } from './index';

// 회원가입 API
function registerUser(userData) {
    return instance.post('signup', userData);
}

// 로그인 API
function loginUser(userData) {
    return instance.post('login', userData);
}

export { registerUser, loginUser };

2 - auth 가지고 axios 요청

// scr/api/posts.js

// 학습 노트에 대한 CRUD API
import { posts } from './index';

// 학습 노트 데이터를 조회하는 API
function fetchPosts() {
  return posts.get('/');
}

// id로 특정 학습 노트를 조회하는 API
function fetchPost(postId) {
  return posts.get(postId);
}

// 학습 노트 데이터를 생성하는 API
function createPost(postData) {
  return posts.post('/', postData);
}

// 학습 노트 데이터를 삭제하는 API
function deletePost(postId) {
  return posts.delete(postId);
}
export { fetchPosts, fetchPost, createPost, deletePost };