[FE] 로그인 구현 원리 (axios)

밥슌·2024년 9월 9일

React

목록 보기

6/16

구글 로그인이나 OAuth 2.0과 같은 인증을 Axios를 사용해 구현할 때의 동작 원리와 과정을 쉽게 설명해 드리겠습니다. 이 과정은 서버와의 통신을 통해 인증 정보를 주고받으며, 사용자를 안전하게 식별하는 역할을 합니다.

기본적인 로그인 및 인증 과정의 순서

사용자 로그인 요청: 사용자가 로그인 버튼을 눌러 로그인 정보를 입력합니다.
서버로 인증 요청 보내기: 로그인 폼에 입력된 정보를 Axios를 통해 서버로 전송합니다.
서버에서 인증 정보 확인: 서버는 사용자가 보낸 로그인 정보를 확인하고, 해당 정보가 맞는지 데이터베이스에서 확인합니다.
인증 성공 시 토큰 발급: 인증에 성공하면 서버는 클라이언트에게 토큰(예: JWT)을 발급해 줍니다.
토큰 저장: 클라이언트(브라우저)는 이 토큰을 로컬 스토리지나 쿠키에 저장합니다.
API 요청 시 토큰 포함: 이후 사용자가 서버에 데이터를 요청할 때, 이 토큰을 포함해서 요청을 보냅니다. 이를 통해 서버는 사용자가 인증된 상태인지 확인합니다.
서버에서 토큰 확인 후 응답: 서버는 요청에 포함된 토큰을 확인하고, 토큰이 유효하다면 요청한 데이터를 클라이언트로 돌려줍니다.

구체적인 동작 과정 (Axios로 로그인 구현)

1. 로그인 요청 보내기 (POST 요청)

사용자가 로그인 폼에 정보를 입력하고 제출하면, 브라우저는 입력된 이메일과 비밀번호를 Axios로 서버에 전송합니다.

import axios from 'axios';

async function login(email, password) {
  try {
    const response = await axios.post('https://your-api.com/auth/login', {
      email,
      password,
    });

    // 서버에서 인증 성공 후 토큰을 받음
    const token = response.data.token;

    // 토큰을 로컬 스토리지에 저장
    localStorage.setItem('token', token);

    console.log('로그인 성공!', token);
  } catch (error) {
    console.error('로그인 실패', error);
  }
}

2. 서버에서 인증 확인 및 토큰 발급

서버는 POST /auth/login 요청을 받아 사용자가 보낸 이메일과 비밀번호를 확인합니다.
인증에 성공하면 서버는 JWT 토큰을 생성하여 응답으로 보냅니다.

// 서버 응답 (예시)
{
  "token": "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9..."
}

3. 토큰 저장

서버가 보낸 JWT 토큰은 클라이언트에서 로컬 스토리지 또는 쿠키에 저장합니다. 이 토큰은 나중에 서버와 통신할 때 사용자가 누구인지 식별하는 데 사용됩니다.

localStorage.setItem('token', token);  // 로컬 스토리지에 토큰 저장

4. 인증된 API 요청 (토큰을 포함하여 요청)

사용자가 로그인을 마친 후, 서버로 데이터를 요청할 때는 토큰을 포함해서 요청해야 합니다. 이렇게 해야 서버가 이 사용자가 인증된 사용자임을 인식할 수 있습니다.

async function getUserProfile() {
  const token = localStorage.getItem('token');  // 저장된 토큰 가져오기

  try {
    const response = await axios.get('https://your-api.com/users/me', {
      headers: {
        Authorization: `Bearer ${token}`  // 토큰을 요청 헤더에 포함
      }
    });

    console.log('사용자 프로필:', response.data);
  } catch (error) {
    console.error('프로필 가져오기 실패', error);
  }
}

Authorization 헤더: 요청할 때 이 헤더에 Bearer <토큰> 형식으로 토큰을 포함시킵니다. 서버는 이 토큰을 사용해 요청한 사용자가 인증된 사용자임을 확인합니다.

5. 토큰 검증 및 서버 응답

서버는 토큰이 포함된 요청을 받으면, 해당 토큰을 검증합니다. 토큰이 유효하고, 사용자가 인증된 사용자라면 요청한 데이터를 응답합니다.

오류 처리: 토큰 만료 또는 401 에러

1. 401 Unauthorized (토큰 만료 또는 인증 실패)

만약 토큰이 만료되었거나 잘못된 토큰이 포함된 경우, 서버는 401 Unauthorized 응답을 보냅니다. 이 때 클라이언트는 토큰을 갱신하거나 사용자를 다시 로그인시켜야 합니다.

2. 토큰 갱신 (Refresh Token)

일반적으로 Refresh Token을 사용해 새로운 토큰을 발급받는 과정을 추가합니다. 토큰이 만료된 경우, Refresh Token을 사용해 새로운 Access Token을 발급받아 API 요청을 재시도할 수 있습니다.

async function refreshToken() {
  try {
    const response = await axios.post('https://your-api.com/auth/refresh', {
      refreshToken: localStorage.getItem('refreshToken')
    });

    const newToken = response.data.token;
    localStorage.setItem('token', newToken);

    return newToken;  // 새로운 토큰 반환
  } catch (error) {
    console.error('토큰 갱신 실패', error);
  }
}