[axios] axios 인터셉터 추가하기

 

access token이 필요한 요청일 때 마다 해당 요청 메소드에 앞서 계속해서 header에 토큰을 추가 해 주었다.

이런 방식이 두가지 이유로 맘에 들지 않았는데

1. 중복된 코드 반복해서 작성

2. 토큰이 필요한 요청인지 아닌지 판단하는 과정 반복

 

axios 인터셉터를 통해 이를 해결하는 방법을 찾았다.

request 요청이 이루어지기 전에, response가 이루어진 직후 미리 설정, 결과 값을 가공하는 인터셉터를 통해 한번에 관리가 가능하다.

 

기존 코드

//api/index.js

function Instance() {
  const instance = axios.create({
    baseURL: "url",
    headers: {
      "Content-type": "application/json",
    },
  });
  return instance;
}

export const http = Instance();

// store.postSlice.js

import { http } from "../api/index"; 

...

export const fetchPosts = createAsyncThunk("posts/fetchPosts", async () => {
  http.defaults.headers["access-token"] = localStorage.getItem("access-token");
  const { data } = await http.get("/diary/list");
  return data.data;
});

export const deletePost = createAsyncThunk("posts/deletePost", async (id) => {
  http.defaults.headers["access-token"] = localStorage.getItem("access-token");
  await http.delete(`/diary/${id}`);
  return id;
});

...

각 요청마다 토큰을 헤더에 반복해서 삽입했다.

 

 

인터셉터 추가한 코드

import axios from "axios"

function Instance() {
  const instance = axios.create({
    baseURL: "url",
    headers: {
      "Content-type": "application/json",
    },
  })

  instance.interceptors.request.use(
    (config) => {
      config.headers["access-token"] = localStorage.getItem("access-token")
      return config
    },
    (error) => {
      console.log(error)
      return Promise.reject(error)
    }
  )
  instance.interceptors.response.use(
    (response) => {
      return response
    },
    (error) => {
      console.log(error)
      // 응답 에러 : 에러코드로 처리 방법 지정
      //  ex) locaStorage에 토큰이 없음 -> 안내 메세지 후 로그인 페이지로 redirect, 
      //  ex) access token 만료 -> refreshtoken으로 access토큰 재요청
    }
  )
  return instance
}

export const http = Instance()

// store.postSlice.js

import { http } from "../api/index"; 

...

export const fetchPosts = createAsyncThunk("posts/fetchPosts", async () => {
  const { data } = await http.get("/diary/list");
  return data.data;
});

export const deletePost = createAsyncThunk("posts/deletePost", async (id) => {
  await http.delete(`/diary/${id}`);
  return id;
});

...

각 요청 마다 헤더에 토큰을 등록하는 코드를 작성하지 않아도 된다.

 

수정전 방식은 요청 응답이 에러가 났을 때 각 코드에서 처리를 해줘야 했는데 인터셉터를 달아주니 한번에 처리가 가능해졌다.