Axios 인터셉터를 활용한 인증 API 호출

인터셉터 패턴

Axios 인스턴스 생성하기

import axios from 'axios'

const api = axios.create({
  baseURL: '/api',
  withCredentials: true // send cookies
})

export default api

메모리에 액세스 token 저장하기

let accessToken = null

export function setAccessToken(t) { accessToken = t }
export function getAccessToken() { return accessToken }

요청 인터셉터: 헤더 추가하기

api.interceptors.request.use((config) => {
  const token = getAccessToken()
  if (token) {
    config.headers.Authorization = 'Bearer ' + token
  }
  return config
})

응답 인터셉터: 401 처리하기

api.interceptors.response.use(
  (response) => response,
  async (error) => {
    const original = error.config
    if (error.response?.status === 401 && !original._retried) {
      // ... refresh and retry (next scenes)
    }
    return Promise.reject(error)
  }
)

무한 재시도 반복 방지하기

if (error.response?.status === 401 && !original._retried) {
  original._retried = true
  // attempt refresh exactly once for this request
}

갱신 엔드포인트 호출하기

const { data } = await api.post('/auth/refresh')
setAccessToken(data.accessToken)

original 요청 재시도하기

original.headers.Authorization = 'Bearer ' + data.accessToken
return api(original) // retry the original request

동시에 발생한 401 처리하기

let refreshing = null

function refreshOnce() {
  if (!refreshing) {
    refreshing = api.post('/auth/refresh')
      .finally(() => { refreshing = null })
  }
  return refreshing
}

포기하기: 강제 로그아웃

try {
  await refreshOnce()
} catch {
  setAccessToken(null)
  router.push('/login')
  return Promise.reject(error)
}

컴포넌트에서 인스턴스 사용하기

<script setup>
import api from '@/lib/api'
import { ref, onMounted } from 'vue'

const profile = ref(null)
onMounted(async () => {
  const { data } = await api.get('/me')
  profile.value = data
})
</script>

빠른 확인

복습