[DAY46] request headers - Authorization

로그인이 된 상태여야 어떤 게시물 등에 접근할 수 있을 때, request headers에 매번 token값을 보내주어야함. 근데 코드양이 너무 길어지고, 오타가 발생하기 쉬울 것 같음.

이럴 때는 instance를 생성하고 interceptor를 활용하여, 매번 서버요청을 보내는 코드를 짤때마다 헤더값을 넣어주지 않아도 됨.

interceptor는 단어 그대로 요청 전에 잠시 그 요청을 가로채서, 원하는 로직이 담긴 함수를 실행하여 헤더값에 자동으로 넣어주면 되는 것이다.

instance와 interceptor.request를 사용하려면 다음과 같은 파일을 만들어주면 된다.

api.js

import axios from 'axios'
import { cookies } from '../shared/cookies'


const instance = axios.create({
    baseURL:process.env.REACT_APP_SERVER_URL,
    headers:{
      "Access-Control-Allow-Origin": "*",
    },
    // timeout: 1,
    // 오류 확인 가능한지 테스트.. 1밀리세컨드.. 내에 응답을 못받으면 에러처리 하도록 돼 있음.
})



instance.interceptors.request.use(
  // 요청을 보내기 전 수행되는 함수
  function (config) {
const token = cookies.get("token")
    config.headers["authorization"] = `Bearer ${token}`;
    return config
  },

  // 오류 요청을 보내기 전 수행되는 함수
  function (error) {
    return Promise.reject(error)
    // return error 가 아님 !! 꼭 프로미스.리젝트 여야만 함
  }
)

이를 사용하려면, 위 파일을 필요한 파일 내에 import 해와서, axios.메서드('서버주소/uri')대신에 다음과 같이 작성해주면 된다.
나는 api라는 이름으로 임포트해와서 사용함.

//위의 thunk함수 부분 생략
const response = await api.get(`/mypage`)