이 블로그 포스트에서는 Axios를 사용하여 JWT 토큰 기반의 인증 요청을 하는 방법에 대해 알아보겠습니다. JWT(JSON Web Token)는 클라이언트와 서버 간의 인증을 위한 표준 방법 중 하나입니다.

Axios란?

Axios는 JavaScript로 작성된 HTTP 클라이언트 라이브러리로, 비동기 방식으로 서버에 HTTP 요청을 보내고 응답을 받을 수 있습니다. Axios는 브라우저와 Node.js 환경에서 모두 사용할 수 있으며, 간단한 API와 다양한 기능을 제공하므로 많은 개발자들에게 인기가 있습니다.

JWT 토큰 기반의 인증 요청

JWT 토큰 기반의 인증 요청을 하려면 먼저 JWT 토큰을 발급받아야 합니다. 이 토큰은 서버로부터 받은 후, 인증이 필요한 모든 요청의 헤더에 포함하여 전송해야 합니다. Axios를 사용하여 이 과정을 간단하게 처리할 수 있습니다.

import axios from 'axios';

// JWT 토큰 발급 요청
axios.post('/api/auth/login', {
  username: '사용자명',
  password: '비밀번호'
})
  .then((response) => {
    const token = response.data.token;

    // JWT 토큰을 헤더에 설정
    axios.defaults.headers.common['Authorization'] = `Bearer ${token}`;

    // 인증이 필요한 요청
    axios.get('/api/user/profile')
      .then((response) => {
        console.log(response.data);
      })
      .catch((error) => {
        console.log(error);
      });
  })
  .catch((error) => {
    console.log(error);
  });

위의 코드에서는 먼저 로그인 요청을 보냅니다. 서버는 사용자 이름과 비밀번호를 확인한 후, 유효한 JWT 토큰을 응답으로 전송합니다. 이 토큰을 받은 후 axios.defaults.headers.common['Authorization'] 헤더에 설정하여 모든 요청에 인증 정보를 함께 전송합니다.

이제 axios.get('/api/user/profile')를 사용하여 사용자 프로필 정보를 요청할 수 있습니다. 서버에서는 JWT 토큰의 유효성을 검사하고, 인증된 사용자의 프로필 정보를 응답으로 전송합니다.

결론

이번 포스트에서는 Axios를 사용하여 JWT 토큰 기반의 인증 요청을 하는 방법에 대해 알아보았습니다. Axios의 간편한 API와 편리한 기능을 활용하여 인증이 필요한 요청을 쉽게 처리할 수 있습니다. 이를 통해 보안성 있는 웹 어플리케이션을 개발할 수 있습니다.

더 자세한 정보는 아래의 참고 자료를 참고하시기 바랍니다.

참고 자료

• Axios GitHub 저장소
• JWT(JSON Web Token) 소개
• Axios로 POST 요청하기 (한글 블로그 포스트)