Axios를 사용하여 인증 토큰(header)을 추가하는 방법

10 Nov 2023

axios

Axios는 자바스크립트에서 널리 사용되는 HTTP 클라이언트 라이브러리입니다. API 요청 시 인증 토큰을 HTTP 헤더에 추가하는 방법을 알아보겠습니다.

먼저, axios 패키지를 프로젝트에 설치합니다. 다음 명령어를 사용하여 설치할 수 있습니다.
```
$ npm install axios
```

Axios를 사용하여 API 요청을 보내기 전에, axios.defaults.headers.common 속성을 사용하여 헤더에 인증 토큰을 추가할 수 있습니다. 다음은 예시 코드입니다.

const axios = require('axios');

// 인증 토큰
const authToken = 'YOUR_AUTH_TOKEN';

// 헤더에 인증 토큰 추가
axios.defaults.headers.common['Authorization'] = `Bearer ${authToken}`;

// API 요청
axios.get('https://api.example.com/users')
  .then(response => {
    // 응답 처리
    console.log(response.data);
  })
  .catch(error => {
    // 에러 처리
    console.error(error);
  });

위 코드에서 YOUR_AUTH_TOKEN 부분에는 실제 인증 토큰을 입력해야 합니다.

axios.defaults.headers.common 객체를 사용하여 인증 토큰(header)을 설정하면, 모든 Axios 요청에 자동으로 헤더가 추가됩니다.

이제 API 요청을 보낼 때마다 인증 토큰이 헤더에 자동으로 추가됩니다. 추가적인 헤더 설정이 필요한 경우, axios.defaults.headers.common 이외의 다른 속성을 사용하거나 인스턴스 기반의 Axios를 사용할 수도 있습니다.

위의 예시는 인증 토큰을 Bearer 형식으로 사용하는 경우입니다. 실제로 사용하는 인증 방식에 따라 해당 형식을 맞추어 설정하면 됩니다.
추가적인 인증 토큰 관리가 필요한 경우, Axios 인터셉터를 사용하여 요청 또는 응답 전에 토큰 값을 동적으로 변경할 수도 있습니다. 이는 복잡한 권한 관리 시나리오에서 유용할 수 있습니다.

더 자세한 내용은 Axios 공식 문서를 참조하시기 바랍니다.

Axios를 사용하여 API 요청 시 인증 토큰을 헤더에 추가하는 방법에 대해 알아보았습니다. 이를 통해 보안 인증이 필요한 API와 통신할 때 편리하게 인증 토큰을 관리할 수 있습니다.

#axios #httpclient