카테고리 없음

Vue.js와 Django를 이용한 세션 기반 로그인 시스템 구성 방법

idea9329 2024. 10. 17. 10:42
반응형

 

Vue.js와 Django를 함께 사용하여 세션 기반 로그인 시스템을 구축하는 것은 웹 애플리케이션에서 매우 유용합니다. 세션 기반 인증은 서버에서 세션을 관리하며, 사용자 인증 상태를 유지하는 방식으로, 쿠키를 사용하여 보안성이 높은 인증 시스템을 제공합니다. 이번 글에서는 Vue.js와 Django를 이용해 세션 기반 로그인 시스템을 구성하는 방법을 단계별로 설명합니다.

1. 세션 기반 로그인 시스템 개요

Django는 기본적으로 세션 기반 인증을 지원하며, Vue.js를 통해 프론트엔드에서 로그인 및 인증 상태를 관리할 수 있습니다. 세션 기반 인증은 주로 서버에서 세션 쿠키를 발행하고, 클라이언트가 요청할 때마다 이 쿠키를 사용하여 인증된 사용자 여부를 확인하는 방식입니다.

1.1 주요 기술 스택

  • Django: 백엔드 프레임워크 (세션 관리 및 인증 제공)
  • Vue.js: 프론트엔드 프레임워크 (UI 및 로그인 처리)
  • Django Rest Framework: Django에서 REST API 구축을 지원하는 확장 도구
  • Axios: Vue.js에서 API 요청을 처리하는 HTTP 클라이언트

2. Django 백엔드 설정

2.1 Django 프로젝트 및 앱 생성

먼저 Django 프로젝트를 생성하고, 필요한 앱과 패키지를 설치합니다.

django-admin startproject myproject
cd myproject
python manage.py startapp accounts

2.2 Django 인증 및 세션 설정

settings.py 파일에서 기본 세션 설정을 확인합니다. Django는 기본적으로 세션 기반 인증을 사용하므로, 특별한 설정 없이 세션을 사용할 수 있습니다.

# Django 기본 인증 백엔드 설정
AUTHENTICATION_BACKENDS = [
    'django.contrib.auth.backends.ModelBackend',
]

# 세션 설정
SESSION_COOKIE_AGE = 1209600  # 2주 (세션 유지 기간)
SESSION_SAVE_EVERY_REQUEST = True  # 모든 요청마다 세션 저장
SESSION_EXPIRE_AT_BROWSER_CLOSE = False  # 브라우저가 닫혀도 세션 유지

2.3 로그인 및 로그아웃 뷰 구현

Django에서 세션 기반 로그인과 로그아웃을 처리하기 위해 뷰를 구현합니다.

views.py 파일에서 로그인 및 로그아웃 뷰를 작성합니다.

from django.contrib.auth import authenticate, login, logout
from django.http import JsonResponse
from django.views.decorators.csrf import csrf_exempt
from django.middleware.csrf import get_token

@csrf_exempt
def login_view(request):
    if request.method == 'POST':
        username = request.POST.get('username')
        password = request.POST.get('password')
        user = authenticate(request, username=username, password=password)
        if user is not None:
            login(request, user)
            return JsonResponse({'message': 'Login successful'})
        else:
            return JsonResponse({'error': 'Invalid credentials'}, status=400)

@csrf_exempt
def logout_view(request):
    if request.method == 'POST':
        logout(request)
        return JsonResponse({'message': 'Logged out successfully'})

def csrf_token_view(request):
    token = get_token(request)
    return JsonResponse({'csrfToken': token})

2.4 URL 설정

urls.py 파일에서 로그인, 로그아웃, 그리고 CSRF 토큰을 발급하는 엔드포인트를 설정합니다.

from django.urls import path
from .views import login_view, logout_view, csrf_token_view

urlpatterns = [
    path('login/', login_view, name='login'),
    path('logout/', logout_view, name='logout'),
    path('csrf-token/', csrf_token_view, name='csrf-token'),
]

2.5 CORS 및 CSRF 설정

Vue.js와 Django 간의 통신을 위해 CORS 및 CSRF 설정을 해야 합니다. 우선, django-cors-headers 패키지를 설치합니다.

pip install django-cors-headers

settings.py 파일에 CORS 설정을 추가합니다.

INSTALLED_APPS = [
    'corsheaders',
    'django.contrib.sessions',  # 세션 관리 활성화
    'django.contrib.auth',
]

MIDDLEWARE = [
    'corsheaders.middleware.CorsMiddleware',
    'django.middleware.common.CommonMiddleware',
    'django.middleware.csrf.CsrfViewMiddleware',  # CSRF 보안
    'django.contrib.sessions.middleware.SessionMiddleware',  # 세션 활성화
]

CORS_ALLOW_CREDENTIALS = True
CORS_ALLOW_ALL_ORIGINS = False
CORS_ALLOWED_ORIGINS = ['http://localhost:8080']  # Vue 앱의 도메인 추가

3. Vue.js 프론트엔드 설정

3.1 Vue 프로젝트 생성

Vue CLI를 이용해 Vue 프로젝트를 생성합니다.

vue create my-vue-app
cd my-vue-app

3.2 Axios 설치

Django 백엔드와 통신하기 위해 Axios 패키지를 설치합니다.

npm install axios

3.3 로그인 컴포넌트 작성

login.vue 파일을 생성하여 로그인 폼과 로그인 요청을 처리합니다.

<template>
  <div>
    <h2>Login</h2>
    <form @submit.prevent="login">
      <input v-model="username" type="text" placeholder="Username" required />
      <input v-model="password" type="password" placeholder="Password" required />
      <button type="submit">Login</button>
    </form>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      username: '',
      password: '',
    };
  },
  methods: {
    async login() {
      try {
        // 먼저 CSRF 토큰을 가져옴
        const csrfResponse = await axios.get('http://localhost:8000/api/csrf-token/', { withCredentials: true });
        axios.defaults.headers.common['X-CSRFToken'] = csrfResponse.data.csrfToken;

        // 로그인 요청
        const response = await axios.post('http://localhost:8000/api/login/', {
          username: this.username,
          password: this.password,
        }, { withCredentials: true });

        alert(response.data.message);
      } catch (error) {
        console.error(error);
        alert('Login failed');
      }
    },
  },
};
</script>

4. 세션 및 CSRF 처리

4.1 세션 기반 인증 상태 유지

로그인 성공 시 Django는 세션 쿠키를 클라이언트에 발급하고, 이를 통해 클라이언트가 인증 상태를 유지할 수 있습니다. Axios 요청에서 withCredentials: true를 사용하여 쿠키를 Django 서버로 전송합니다.

4.2 로그아웃 처리

로그아웃 요청을 보내기 위해 Axios를 사용하여 /logout/ 엔드포인트로 POST 요청을 보냅니다.

async logout() {
  try {
    const response = await axios.post('http://localhost:8000/api/logout/', {}, { withCredentials: true });
    alert(response.data.message);
  } catch (error) {
    console.error(error);
    alert('Logout failed');
  }
}

5. 결론

이 가이드를 통해 Vue.js와 Django를 이용하여 세션 기반 로그인 시스템을 구축하는 방법을 살펴보았습니다. Django는 세션과 사용자 인증 기능을 기본적으로 제공하며, Vue.js를 사용하여 직관적인 사용자 인터페이스를 만들 수 있습니다.

세션 기반 인증은 쿠키를 사용하여 클라이언트와 서버 간의 인증 상태를 유지하므로, 특히 보안이 중요한 시스템에 적합한 방식입니다. 이 글을 통해 Vue.js와 Django를 효과적으로 연동하여 사용자 인증 시스템을 구축해 보세요!

반응형

'카테고리 없음'의 다른글

  • 현재글Vue.js와 Django를 이용한 세션 기반 로그인 시스템 구성 방법

티스토리툴바