함수의 정의 위치와 호출 방식 (다시 생각해보기)

 

무한 요청이 발생하는 이유는 인터셉터 내부에서 재발급 함수(reissue)를 호출하는 구조가 올바르게 처리되지 않아서 발생할 수 있습니다. 이를 해결하려면, reissue 함수를 인터셉터 바깥에 정의하고, 이를 통해 재발급 요청을 처리하는 방식으로 수정해야 합니다.

import axios from 'axios'

const instance = axios.create({
  baseURL: 'http://localhost:8080', // 기본 URL을 직접 설정
  headers: {
    'Content-Type': 'application/json',
  },
  withCredentials: true
})

// 요청 인터셉터 설정
instance.interceptors.request.use(
  (config) => {
    const token = localStorage.getItem('token')
    console.log('chan Token ', token)
    if (token) {
      config.headers.Authorization = `Bearer ${token}`
    }
    return config
  },
  (error) => {
    return Promise.reject(error)
  }
)

// 응답 인터셉터 설정
instance.interceptors.response.use(
  (response) => response,
  (error) => {
    if (error.response && error.response.status === 401) {
      const originalRequest = error.config

      if (!originalRequest._retry) {
        originalRequest._retry = true
        return reissue().then((newToken) => {
          // 재발급 받은 토큰을 사용하여 원래 요청을 다시 시도
          originalRequest.headers['Authorization'] = `Bearer ${newToken}`
          return instance(originalRequest)
        }).catch((reissueError) => {
          // 재발급도 실패한 경우
          console.error('토큰 재발급 및 재요청 실패:', reissueError)
          return Promise.reject(reissueError)
        })
      }
    }
    return Promise.reject(error)
  }
)



// 토큰 재발급 함수
const reissue = async () => {
  try {
    const response = await instance.post('/api/reissue', {}, {
      withCredentials: true, // 쿠키를 포함하여 요청
    })
    let newToken = response.headers['access']

    console.log('newToken ', newToken)
    if (newToken) {
      console.log('newToken', newToken)
      localStorage.setItem('token', newToken) // 새로운 토큰을 로컬 스토리지에 저장
      return newToken
    } else {
      console.error('응답 헤더에 새 토큰이 존재하지 않습니다.')
      throw new Error('토큰 재발급 실패')
    }
  } catch (error) {
    console.error('토큰 재발급 실패:', error)
    throw error
  }
}

export default instance

import axios from 'axios'

// 토큰 재발급 함수
const reissue = async () => {
  try {
    const response = await axios.post('http://localhost:8080/api/reissue', {}, {
      withCredentials: true, // 쿠키를 포함하여 요청
    })
    let newToken = response.headers['access']

    if (newToken) {
      console.log('newToken', newToken)
      localStorage.setItem('token', newToken) // 새로운 토큰을 로컬 스토리지에 저장
      return newToken
    } else {
      console.error('응답 헤더에 새 토큰이 존재하지 않습니다.')
      throw new Error('토큰 재발급 실패')
    }
  } catch (error) {
    console.error('토큰 재발급 실패:', error)
    throw error
  }
}

const instance = axios.create({
  baseURL: 'http://localhost:8080', // 기본 URL을 직접 설정
  headers: {
    'Content-Type': 'application/json',
  },
  withCredentials: true
})

// 요청 인터셉터 설정
instance.interceptors.request.use(
  (config) => {
    const token = localStorage.getItem('token')

    if (token) {
      config.headers.Authorization = `Bearer ${token}`
    }
    return config
  },
  (error) => {
    return Promise.reject(error)
  }
)

// 응답 인터셉터 설정
instance.interceptors.response.use(
  (response) => response,
  (error) => {
    if (error.response && error.response.status === 401) {
      const originalRequest = error.config

      if (!originalRequest._retry) {
        originalRequest._retry = true
        return reissue().then((newToken) => {
          // 재발급 받은 토큰을 사용하여 원래 요청을 다시 시도
          originalRequest.headers['Authorization'] = `Bearer ${newToken}`
          return instance(originalRequest)
        }).catch((reissueError) => {
          // 재발급도 실패한 경우
          console.error('토큰 재발급 및 재요청 실패:', reissueError)
          return Promise.reject(reissueError)
        })
      }
    }
    return Promise.reject(error)
  }
)

export default instance