Axios config 설정

토큰 등을 헤더에 실어 보내는 데엔 여러가지 방법이 있다.

 

리덕스 thunk를 사용할 때

1. 일반적인 방법

// axios 인스턴스
const instance = axios.create({
  baseURL: process.env.REACT_APP_MY_API,
});


export const __main = createAsyncThunk(
  "MAIN_FINALE",
  async (payload, thunkAPI) => {
    try {
      const { data } = await instance.get("/api/diary", {
        headers: {
          authorization: `Bearer ${localStorage.getItem("token")}`,
        }
      })

      return thunkAPI.fulfillWithValue(data)
    } catch (error) {
      return thunkAPI.rejectWithValue(error.response.data.result)
    }
  }
)

2. 인스턴스에 적용하는 방법

const instance = axios.create({
  baseURL: process.env.REACT_APP_MY_API,
  headers: {
    authorization: `Bearer ${localStorage.getItem("token")}`,
  }
});

export const __main = createAsyncThunk(
  "MAIN_FINALE",
  async (payload, thunkAPI) => {
    try {
      const { data } = await instance.get("/api/diary")
      return thunkAPI.fulfillWithValue(data)
    } catch (error) {
      return thunkAPI.rejectWithValue(error.response.data.result)
    }
  }
)

3. 인스턴스에 적용하는 방법2

const instance = axios.create({
  baseURL: process.env.REACT_APP_MY_API,
});

instance.defaults.headers.common["Authorization"] = `Bearer ${localStorage.getItem("token")}`;


export const __main = createAsyncThunk(
  "MAIN_FINALE",
  async (payload, thunkAPI) => {
    try {
      const { data } = await instance.get("/api/diary")
      return thunkAPI.fulfillWithValue(data)
    } catch (error) {
      return thunkAPI.rejectWithValue(error.response.data.result)
    }
  }
)

4. 인터셉트하는 방법

export const instance = axios.create({
  baseURL: process.env.REACT_APP_MY_API,
});

instance.interceptors.request.use((config) => {
  config.headers['Authorization'] = `Bearer ${localStorage.getItem("token")}`;
  return config;
});

export const __main = createAsyncThunk(
  "MAIN_FINALE",
  async (payload, thunkAPI) => {
    try {
      const { data } = await instance.get("/api/diary")
      return thunkAPI.fulfillWithValue(data)
    } catch (error) {
      return thunkAPI.rejectWithValue(error.response.data.result)
    }
  }
)

 

 

Axios만 사용할 때

1. 일반적인 방법

    axios.get(`${process.env.REACT_APP_MY_API}/api/diary`, {
      headers: {
        authorization: `Bearer ${localStorage.getItem("token")}`,
      }
    }).then((response) => {
      console.log(response)
    });

2. 전역 axios 기본값 설정하기

// 아무데나 놓으면 됨
axios.defaults.headers.common["Authorization"] = `Bearer ${localStorage.getItem("token")}`;


    axios.get(`${process.env.REACT_APP_MY_API}/api/diary`).then((response) => {
      console.log(response);
    });