[Axios] 로그인 시 request header 토큰 설정 interceptor 사용

개요

• 프로젝트 하면서 며칠 내내 가장 골머리를 앓고 있었던 문제가 바로
• 로그인 시 axiosInstance에 header 토큰 설정이 곧바로 이루어지지 않는 것이었다
• 로그인 완료 -> 로컬스토리지 및 쿠키에 토큰 저장 ->전역 상태 store에도 저장 -> axiosInstance에도 헤더 설정
• 문제는 브라우저를 새로고침 하기 전까지는 모든 요청에 토큰이 들어가지 않는다
• 모든 변화가 감지될 때마다(쿠키,로컬스토리지,전역상태 등) 부디 header 토큰 설정이 이루어지길 바라는 마음으로 모든 코드를 시도해봐도 절!대! 새로고침하기 전까지는 토큰이 안들어감
• 정말 많고 많은 삽질 과정 끝에 (약간은 허무한..) 해결

문제 및 해결

// fetchCall.ts
// (기존) 1. axiosInstance 생성
const accessToken = getCookie('accessToken')
// 쿠키 값을 읽고 axiosInstance 생성
const getAxiosInstance = (baseURL: string | undefined, TOKEN:string) => {
  if (!baseURL) {
    throw new Error('Base URL is not defined.')
  }
  return axios.create({
    baseURL,
    headers: {
      'Content-Type': 'application/json',
      Authorization: `Bearer ${TOKEN}`,
    },
  })
}
export const axiosInstance = getAxiosInstance('/usports',accessToken)

// (기존) 2. axios 기본 토큰 설정
export const setHeaderToken = (token: string) => {
  axios.defaults.headers.common.Authorization = `Bearer ${token}`
}

보시다시피 기존 코드에는 axios interceptor을 사용하지 않았다

• 대부분의 요청 코드는 axiosInstance을 이용한 fetch Call 생성 함수를 이용하는데 로그인 후 한 번 refresh 되기 전까지는 절대 요청 헤더에 토큰 값이 포함되지 않았다
• 너무 답답해서 로그인 후 강제로 router.refresh() 시키는 코드도 짜봤다..^^

오늘의 교훈 : axios interceptor 이용하기

• 사실 구글링 조금만 해도 interceptor 을 이용한 로그인 로직을 많이 볼 수 있다
• 근데 본인은 이것 또한 next.js SSR 관련 이슈겠거니 라는 생각에 갇혀있었음 ㅇ_<

import axios from 'axios'
import { cookies } from 'next/headers'

axios.interceptors.request.use(
  (config) => {
    const cookieStore = cookies()
    const accessToken = cookieStore.get('connect.sid')
    config.headers['Authorization'] = `Bearer ${accessToken}` 
    return config
  },
  (error) => {
    return Promise.reject(error)
  },
)
//...중략

// fetchCall.ts
axiosInstance.interceptors.request.use((config) => {
  const accessToken = getCookie('accessToken')
  config.headers['Authorization'] = `Bearer ${accessToken}` 
  return config
})

허무하지만 이제 로그인 직후 텅 빈 피드를 안 봐도 돼서 정말 기쁘다 ^^!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!