Axios를 사용하여 인증된 사용자의 데이터만 가져오는 방법

10 Nov 2023

axios

Axios는 자바스크립트를 사용하여 HTTP 요청을 할 수 있는 강력한 라이브러리입니다. 이를 통해 인증된 사용자의 데이터만 가져올 수 있습니다. 이번 블로그 포스트에서는 Axios를 사용해 인증된 사용자의 데이터를 가져오는 방법을 알아보겠습니다.

1. Axios 설치

먼저 프로젝트에 Axios를 설치해야 합니다. npm을 사용하면 다음 명령을 실행하여 Axios를 설치할 수 있습니다.

npm install axios

2. API 요청

Axios를 사용하여 API 요청을 보내기 위해 다음과 같이 코드를 작성합니다.

import axios from 'axios';

async function fetchUserData() {
  try {
    // 사용자 인증에 필요한 토큰을 얻어온다.
    const token = await fetchToken();

    // 헤더에 토큰을 추가하여 인증된 요청을 보낸다.
    const response = await axios.get('https://api.example.com/user', {
      headers: {
        Authorization: `Bearer ${token}`
      }
    });

    // 응답 결과를 반환한다.
    return response.data;
  } catch (error) {
    console.error('데이터 가져오기 실패:', error);
  }
}

async function fetchToken() {
  // 토큰을 얻어오는 로직을 구현한다.
  // 예시로는 로그인 API를 호출하여 토큰을 얻어오는 것으로 가정하겠습니다.
  const response = await axios.post('https://api.example.com/login', {
    username: '사용자명',
    password: '비밀번호'
  });

  return response.data.token;
}

fetchUserData().then(data => {
  console.log('사용자 데이터:', data);
});

3. 코드 설명

fetchUserData 함수는 사용자 토큰을 얻은 후 해당 토큰을 헤더에 추가하여 인증된 요청을 보냅니다.
fetchToken 함수는 예시로 로그인 API를 호출하여 사용자 인증에 필요한 토큰을 얻어옵니다.
axios.get 메서드를 사용하여 GET 요청을 보내고, axios.post 메서드를 사용하여 POST 요청을 보냅니다.
Authorization 헤더에는 Bearer 스키마를 사용하여 토큰을 전달합니다.

4. 결론

Axios를 사용하여 인증된 사용자의 데이터를 가져오는 방법을 알아보았습니다. 이를 활용하면 인증된 사용자의 권한에 맞게 데이터를 가져올 수 있습니다. Axios는 간편하게 HTTP 요청을 처리할 수 있는 강력한 도구이므로 프로젝트에서 활용해보시기 바랍니다.

참고 자료

Axios 공식 문서: https://axios-http.com/
Bearer authentication: https://developer.mozilla.org/en-US/docs/Web/HTTP/Authentication#Bearer_authentication

#axios #인증 #데이터가져오기