[Vue.js] Axios interceptors 관련, 로그인 후 API호출 시 JWT 토큰이 header에 실리지 않는 문제

[그림 1] API호출 시 JWT 토큰이 header에 실리지 않는 문제

Axios로 REST API를 연동하고 있다. 로그인 후 새로운 토큰을 받았지만 API호출 시 해당 토큰이 header에 실리지 않아  [그림 1]과 같이 401 에러와 함께 로그인 화면으로 리다이렉션 되어 버렸다.

기존에 interceptors에 response 코드만 적용했었던 것이 문제였다. 따라서 request 할 때 토큰을 실어 보내는 아래의 코드를 추가하여 문제를 해결할 수 있었다.

instance.interceptors.request.use(
  function (config) {
    console.log('config : ', config)
    config.headers.Authorization = `Bearer ${localStorage.getItem('jwt')}`
    return config
  },
  function (error) {
    return Promise.reject(error)
  }
)

 

참고자료

https://velog.io/@kyh196201/HTTP-%ED%97%A4%EB%8D%94-%ED%86%A0%ED%81%B0-%EC%84%A4%EC%A0%95-axios-%EC%9D%B8%ED%84%B0%EC%85%89%ED%84%B0

HTTP 헤더 토큰 설정 & axios 인터셉터