TIL #127 : Axios Interceptor 도입으로 인증 공통화 및 141줄 절감

요약

기존의 매 페이지마다 인증 처리를 하던 방식에서 Axios interceptor로 요청 전후를 공통 관심사로 묶어서 총 7페이지에서 순 141줄을 절감했다. 

 

상황

인증이 필요한 페이지에서 등록/수정/삭제 요청을 보낼 때마다 매 페이지에서 인증 처리를 구현하고 있었다. 

 

해결

Axios interceptor 도입하여 반복되는 인증 로직을 공통 관심사로 묶어 유지보수성과 일관성을 확보했다. 

 

Axios 란?

Axios는 브라우저와 Node.js를 위한 Promise 기반 HTTP 클라이언트이다. 그러니까 브라우저든 Node.js든 동일하게 사용할 수 있는 웹 요청 라이브러리다. 

 

Axios Instance 란?

Axios instance는 공통된 설정(예: baseURL, 헤더 등)을 사전에 정의해 재사용할 수 있도록 하는 Axios의 기능이다. 

 

Axios interceptor 란?

Axios interceptor는 요청 또는 응답이 처리되기 전/후에 가로채어 공통 로직(예: 토큰 자동 추가, 에러 처리 등)을 수행할 수 있도록 도와주는 기능이다. 

 

Axios Interceptor 적용

적용 전의 코드는 아래와 같다. 매 인증 요청을 보내는 페이지마다 해당 로직이 있었다.

try {
  const token = getAccessToken()

  if (!token) {
    router.push('/login')
    return
  }

  const response = await fetch('/api/items', {
    method: 'POST',
    headers: {
      Authorization: `Bearer ${token}`,
    },
    body: data,
  })

  if (response.ok) {
    router.push('/items')
  } else {
    const errorResponse = await response.json()

    if (response.status === 401) {
      alert('인증이 만료되었습니다. 다시 로그인해주세요.')
      removeAccessToken()
      router.push('/login')
    }
  }
} catch (error) {
  // ...
}

예제로 만들었다. 단순화해서 Access token만 썼다.

 

그리고 이를 공통화하기 위해 Axios Interceptor를 만들었다.

import axios from 'axios'

export const authInstance = () => {
  const instance = axios.create()

  instance.interceptors.request.use(
    (config) => {
      const token = getAccessToken()
      if (!token) {
        throw new CustomError('인증 토큰이 없습니다.', 401)
      }
      config.headers.Authorization = `Bearer ${token}`
      return config
    },
    (error) => Promise.reject(error),
  )

  instance.interceptors.response.use(
    (response) => response,
    (error) => {
      if (error?.response?.status === 401) {
        alert('인증이 만료되었습니다. 다시 로그인해주세요.')
        removeAccessToken()
        return Promise.reject(new CustomError('토큰 만료', 401))
      }
      return Promise.reject(error)
    },
  )

  return instance
}

인스턴스를 만들고, 요청 전에 토큰을 가져와 헤더에 넣어주었고, 응답에 401 에러가 나면 인증 만료 처리를 해주었다. 

 

그리고 이를 처음 코드에 적용하면,

try {
  await authInstance().post('/api/items', data)
  router.push('/items')
} catch (error: CustomError) {
  if (error.status === 401) {
    alert('인증이 만료되었습니다. 다시 로그인해주세요.')
    router.push('/login')
}

이렇게 된다. 

 

결론

7개 페이지에서 중복된 인증 처리 로직을 제거하여, 순 141줄을 절감하고 유지보수성을 높였다.