[typescript] Axios를 사용하여 다양한 인증 방식에 대한 요청 보내는 방법

22 Dec 2023

typescript

Axios는 JavaScript 및 TypeScript 환경에서 사용하는 강력한 HTTP 클라이언트 라이브러리이며, 서버와 통신하기 위한 다양한 방법을 제공합니다. 특히 다양한 인증 방식을 사용해야 하는 경우, Axios를 사용하여 해당 요청을 보내는 방법에 대해 알아볼 것입니다.

기본적인 사용법

우선, Axios를 사용하기 위해서는 프로젝트에 Axios를 설치해야 합니다.

npm install axios

설치 후, 다음과 같이 Axios를 사용하여 간단한 GET 요청을 보낼 수 있습니다.

import axios, { AxiosRequestConfig, AxiosResponse } from 'axios';

async function fetchData() {
  try {
    const response: AxiosResponse = await axios.get('https://api.example.com/data');
    console.log(response.data);
  } catch (error) {
    console.error(error);
  }
}

fetchData();

HTTP 기본 인증 (Basic Authentication)

HTTP 기본 인증을 사용하여 서버에 요청을 보내려면, 요청 헤더에 인증 정보를 포함시켜야 합니다.

const config: AxiosRequestConfig = {
  method: 'get',
  url: 'https://api.example.com/data',
  auth: {
    username: 'your_username',
    password: 'your_password'
  }
};

async function fetchWithBasicAuth() {
  try {
    const response: AxiosResponse = await axios(config);
    console.log(response.data);
  } catch (error) {
    console.error(error);
  }
}

fetchWithBasicAuth();

Bearer 토큰 인증

Bearer 토큰을 사용하여 인증하는 경우, 요청 헤더에 인증 토큰을 포함시켜야 합니다.

const config: AxiosRequestConfig = {
  method: 'get',
  url: 'https://api.example.com/data',
  headers: {
    Authorization: 'Bearer your_token'
  }
};

async function fetchWithBearerToken() {
  try {
    const response: AxiosResponse = await axios(config);
    console.log(response.data);
  } catch (error) {
    console.error(error);
  }
}

fetchWithBearerToken();

Axios를 사용하여 다양한 인증 방식에 대한 요청을 보내는 방법에 대해 알아보았습니다. 이 외에도 많은 인증 방식을 지원하며, 공식 문서를 참고하여 해당하는 방법을 적용할 수 있습니다.

더 자세한 정보는 Axios 공식 문서를 참고하시기 바랍니다.