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

 

Vue.js와 Django를 함께 사용하여 로그인 시스템을 구축하는 것은 매우 강력하고 유연한 방법입니다. Django는 백엔드 프레임워크로 사용자 인증과 권한 관리 기능을 제공하며, Vue.js는 프론트엔드에서 동적이고 반응형 UI를 구축하는 데 최적화되어 있습니다. 이 글에서는 Vue.js와 Django를 결합하여 로그인 시스템을 만드는 방법을 단계별로 설명하겠습니다.

---

1. 로그인 시스템 구조 개요

Vue.js와 Django를 사용한 로그인 시스템의 기본 구조는 다음과 같습니다:

• Django: 백엔드에서 REST API를 통해 사용자 인증 처리
• Vue.js: 프론트엔드에서 로그인 폼과 유저 인터페이스 제공
• JWT (JSON Web Token): 사용자 인증에 대한 토큰 기반 인증 방식 사용

1.1 주요 기술 스택

• Django: 백엔드 프레임워크
• Django REST Framework (DRF): API 구축을 위한 Django 확장
• Simple JWT: 토큰 기반 인증을 위한 Django 라이브러리
• Vue.js: 프론트엔드 프레임워크

---

2. Django 백엔드 설정

2.1 Django 프로젝트 생성 및 설정

먼저 Django 프로젝트를 생성하고 기본적인 설정을 완료해야 합니다.

django-admin startproject myproject
cd myproject

Django REST Framework와 Simple JWT를 설치합니다.

pip install djangorestframework djangorestframework-simplejwt

2.2 Django 앱 생성 및 REST API 설정

로그인 기능을 처리할 앱을 생성합니다.

python manage.py startapp accounts

이제 accounts 앱에서 사용자 인증과 관련된 API를 설정합니다. urls.py에서 로그인 API 엔드포인트를 추가합니다.

from django.urls import path
from rest_framework_simplejwt.views import TokenObtainPairView, TokenRefreshView

urlpatterns = [
    path('login/', TokenObtainPairView.as_view(), name='token_obtain_pair'),
    path('token/refresh/', TokenRefreshView.as_view(), name='token_refresh'),
]

2.3 Django 설정 파일 수정

settings.py 파일에서 REST Framework와 Simple JWT 설정을 추가합니다.

INSTALLED_APPS = [
    'rest_framework',
    'rest_framework_simplejwt',
    'accounts',  # 새로 생성한 앱
]

REST_FRAMEWORK = {
    'DEFAULT_AUTHENTICATION_CLASSES': (
        'rest_framework_simplejwt.authentication.JWTAuthentication',
    ),
}

# JWT 설정
SIMPLE_JWT = {
    'ACCESS_TOKEN_LIFETIME': timedelta(minutes=5),
    'REFRESH_TOKEN_LIFETIME': timedelta(days=1),
}

---

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

3.1 Vue 프로젝트 생성

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

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

3.2 Axios 설치 및 설정

Axios를 사용하여 Django 백엔드와 통신합니다.

npm install axios

src/ 디렉토리에 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 {
        const response = await axios.post('http://localhost:8000/api/login/', {
          username: this.username,
          password: this.password,
        });
        localStorage.setItem('access_token', response.data.access);
        localStorage.setItem('refresh_token', response.data.refresh);
        alert('Login successful');
      } catch (error) {
        console.error(error);
        alert('Login failed');
      }
    },
  },
};
</script>

3.3 Vue Router 설정

Vue Router를 사용하여 로그인 페이지와 대시보드 페이지를 나누어 구성할 수 있습니다. src/router/index.js에 다음을 추가합니다.

import { createRouter, createWebHistory } from 'vue-router';
import Login from '../components/Login.vue';

const routes = [
  {
    path: '/login',
    name: 'Login',
    component: Login,
  },
];

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes,
});

export default router;

---

4. Django와 Vue.js 연동

Django에서 CORS(Cross-Origin Resource Sharing)를 허용해야 합니다. 이를 위해 django-cors-headers 패키지를 설치하고 설정합니다.

pip install django-cors-headers

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

INSTALLED_APPS += ['corsheaders']
MIDDLEWARE += ['corsheaders.middleware.CorsMiddleware']

CORS_ALLOW_ALL_ORIGINS = True  # 모든 도메인에서의 요청 허용

이제 Django와 Vue.js가 연동되어, Vue.js에서 로그인 요청을 하면 Django가 이를 처리하고 JWT 토큰을 반환하게 됩니다.

---

5. 결론

Vue.js와 Django를 사용한 로그인 시스템은 프론트엔드와 백엔드의 분리된 구조 덕분에 확장성과 유지 보수성이 뛰어납니다. 이 가이드를 통해 Django 백엔드에서 사용자 인증을 처리하고, Vue.js 프론트엔드에서 로그인 폼을 구성하여 JWT 기반 인증 시스템을 구축할 수 있습니다.

이 방법을 활용하여 안전하고 효율적인 인증 시스템을 구축해보세요!