자바스크립트 fetch API를 사용한 사용자 인증 구현

10 Sep 2023

javascript

자바스크립트(fetch API)를 사용하면 웹 애플리케이션에서 쉽게 사용자 인증을 구현할 수 있습니다. 사용자 인증은 사용자가 자신의 계정으로 로그인하여 액세스 권한을 얻는 과정을 말합니다. 이 글에서는 fetch API를 사용하여 사용자 인증을 구현하는 방법을 알아보겠습니다.

사용자 인증 API 엔드포인트 만들기

먼저, 사용자 인증을 위한 API 엔드포인트를 만들어야 합니다. 이 API 엔드포인트는 사용자가 제출한 로그인 정보를 검증하고, 유효한 경우에는 인증 토큰을 반환해야 합니다.

const express = require('express');
const bodyParser = require('body-parser');
const jwt = require('jsonwebtoken');

const app = express();

// 사용자 인증을 위한 사용자 정보 데이터베이스 (예시)
const users = [
  { id: 1, username: 'user1', password: 'password1' },
  { id: 2, username: 'user2', password: 'password2' }
];

app.use(bodyParser.json());

// 로그인 엔드포인트
app.post('/login', (req, res) => {
  const { username, password } = req.body;
  
  // 사용자 검증
  const user = users.find(u => u.username === username && u.password === password);
  
  if (user) {
    // 인증 토큰 생성
    const token = jwt.sign({ user }, 'secret_key');
    res.json({ token });
  } else {
    res.status(401).json({ message: 'Invalid username or password' });
  }
});

app.listen(3000, () => {
  console.log('Server started on port 3000');
});

위 코드는 Express.js를 사용하여 로그인을 처리하는 간단한 API 엔드포인트를 생성하는 예시입니다. 이 엔드포인트는 POST 요청을 허용하고, 사용자가 제출한 로그인 정보를 검증하여 유효한 경우에는 인증 토큰을 반환합니다.

fetch API를 사용한 사용자 인증 호출

이제, 클라이언트 측에서 fetch API를 사용하여 서버로 사용자 인증 요청을 보내보겠습니다.

const login = async (username, password) => {
  const response = await fetch('/login', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json'
    },
    body: JSON.stringify({ username, password })
  });
  
  if (response.ok) {
    const { token } = await response.json();
    localStorage.setItem('token', token);
    return true;
  } else {
    const { message } = await response.json();
    throw new Error(message);
  }
};

const logout = () => {
  localStorage.removeItem('token');
};

const isAuthenticated = () => {
  const token = localStorage.getItem('token');
  return token !== null;
};

위 코드는 사용자 인증을 위한 fetch API 호출을 처리하는 예시입니다. login 함수는 사용자의 로그인 정보를 서버로 보내고, 유효한 경우에는 인증 토큰을 로컬 스토리지에 저장합니다. logout 함수는 인증 토큰을 제거하여 로그아웃합니다. isAuthenticated 함수는 인증 토큰의 존재 여부를 확인하여 사용자가 인증되었는지 확인합니다.

사용자 인증 상태 확인

이제, 애플리케이션에서 사용자 인증 상태를 확인하여 로그인 된 사용자에게 적절한 동작을 취할 수 있습니다.

if (isAuthenticated()) {
  // 인증된 사용자로 동작
} else {
  // 로그인 요청 또는 로그인 페이지로 리디렉션
}

위 코드는 isAuthenticated 함수를 사용하여 사용자가 인증되어 있는지 확인하고, 인증된 경우에는 적절한 동작을 취하는 예시입니다. 만약 사용자가 인증되어 있지 않은 경우에는 로그인 요청을 보내거나 로그인 페이지로 리디렉션할 수 있습니다.

이렇게 자바스크립트 fetch API를 사용하여 사용자 인증을 구현할 수 있습니다. fetch API는 비동기적인 AJAX 호출을 처리하는 데 유용한 도구입니다. 사용자 인증은 많은 웹 애플리케이션에서 필요한 기능이므로, fetch API를 활용하여 간단하게 구현할 수 있습니다.