api, instance(instanceMulti), token 사용해서 서버와 통신하기

instance

: axios를 미리 정의 해놓는 곳

intercepter

: request, response를 미리 설정해서 return 해주는 곳

: instance를 도와주는 역할

 

instance 안에 있는 intercepter

---

폴더 구조

 

api 폴더

 

// src/shared/api/comment.js

import instance from '../instance';

// 댓글 조회
export function getComment(postId) {
  return instance({
    method: 'GET',
    url: `/api/comments/${postId}`,
  });
}

// 댓글 작성
export function writeComment(postId, content) {
  return instance({
    method: 'POST',
    url: `/api/comments/${postId}`,
    data: content,
  });
}

//댓글 삭제
export function deleteComment(commentId) {
  return instance({
    method: 'DELETE',
    url: `/api/comments/${commentId}`,
  });
}

// src/shared/api/myinto.js

//프로필 수정페이지
import instance from '../instance';
import instanceMulti from '../instanceMulti';

//프로필 이미지업로드
export function uploadMyImage(userId, url) {
  return instanceMulti({
    method: 'POST',
    url: `/api/users/${userId}`,
    data: url,
  });
}

//마이페이지/내 정보 수정
export function editMyProfile(userId, myPageInfo) {
  return instance({
    method: 'PUT',
    url: `/api/users/${userId}`,
    data: myPageInfo,
  });
}

// src/shared/api/post.js

import instance from '../instance';
import instanceMulti from '../instanceMulti';

//전체 게시글 조회 페이지
export function getPostList() {
  return instance({
    method: 'GET',
    url: '/api/posts',
  });
}

// 게시물 이미지 업로드
export function uploadPostImageOn(img) {
  return instanceMulti({
    method: 'POST',
    url: `/api/posts/images`,
    data: img,
  });
}

// 게시글 작성
export function postWriteOn(postInfo) {
  return instance({
    method: 'POST',
    url: `/api/posts`,
    data: postInfo,
  });
}

// 게시글 상세페이지 조회
export function getDetailPostList(postId) {
  return instance({
    method: 'GET',
    url: `/api/comments/${postId}`,
  });
}

// 좋아요 / 취소
export function postLikeCancel(postId) {
  return instance({
    method: 'POST',
    url: `/api/posts/${postId}/like`,
  });
}

// 게시글 삭제
export function deletePostList(postId) {
  return instance({
    method: 'DELETE',
    url: `/api/posts/${postId}`,
  });
}

//유저게시물 페이지
export function getMyPostList(userId) {
  return instance({
    method: 'GET',
    url: `/api/users/posts/${userId}`,
  });
}

instance / instanceMulti

// src/shared/instance.js

import axios from 'axios';
import { getToken } from './token';

const USER_TOKEN = `Bearer ${getToken('authorization')}`;
console.log(USER_TOKEN);
const instance = axios.create({
  timeout: 1000,
  baseURL: 'http://13.125.45.147',
  headers: {
    'Content-Type': 'application/json; charset=utf-8',
    'X-Requested-With': 'XMLHttpRequest',
    authorization: USER_TOKEN,
    Accept: 'application/json',
  },
});

instance.interceptors.request.use(
  config => {
    return config;
  },
  error => {
    console.log(error);
    return Promise.reject(error);
  }
);

instance.interceptors.response.use(
  response => {
    const res = response;
    return res;
  },
  error => {
    console.log(error);
    return Promise.reject(error);
  }
);

export default instance;

// src/shared/instanceMulti.js

import axios from 'axios';
import { getToken } from './token';

const USER_TOKEN = `Bearer ${getToken('authorization')}`;

const instanceMulti = axios.create({
  timeout: 1000,
  baseURL: 'http://13.125.45.147',
  headers: {
    'Content-Type': 'multipart/form-data',
    Accept: 'application/json',
    authorization: USER_TOKEN,
  }, //폼데이터
});

instanceMulti.interceptors.request.use(
  config => {
    return config;
  },
  error => {
    console.log(error);
    return Promise.reject(error);
  }
);

instanceMulti.interceptors.response.use(
  response => {
    const res = response;
    return res;
  },
  error => {
    console.log(error);
    return Promise.reject(error);
  }
);

export default instanceMulti;

token

// src/shared/token.js

// *** token.js ***

// 키값 기준으로 쿠키에 저장된 값을 가져오는 함수
const getToken = name => {
  // 쿠키 값을 가져옵니다.
  let value = '; ' + document.cookie;
  let parts = value.split('; ' + name + '=');
  if (parts.length === 2) {
    return parts.pop().split(';').shift();
  }
};

// 쿠키에 저장하는 함수
const setToken = (name, value, exp = 5) => {
  let date = new Date();
  // 날짜를 만들어줍니다.

  date.setTime(date.getTime() + exp * 24 * 60 * 60 * 1000);
  // 저장!
  document.cookie = `${name}=${value}; expires=${date.toUTCString()};path=/`;
};

// 만료일을 예전으로 설정해 쿠키를 지웁니다.
const delToken = name => {
  let date = new Date('2020-01-01').toUTCString();

  console.log(date);

  document.cookie = name + '=; expires=' + date;
};
export { getToken, setToken, delToken };

 

+ 참고하면 좋을 것 같은 사이트

https://pinokio0702.tistory.com/373

[Axios][업무][베트남🇻🇳] - Axios instance 생성하고 api 요청 함수 작성하는 방법