반응형
Django, MongoDB, Vue를 이용하여 각 브라우저에서 독립적인 세션을 유지하고, 동일 사용자가 다른 브라우저에서 로그인할 경우 기존 세션을 만료시키는 방식을 구현하려면, 다음과 같은 단계를 거쳐야 합니다. 이를 통해 로그인 세션을 독립적으로 유지하고, 동일 계정이 다른 브라우저에서 로그인 시 기존 세션을 만료시키는 기능을 구현할 수 있습니다.
1. 프로젝트 설정
- Django: Django REST framework를 활용해 API를 생성하고, MongoDB와 Django를 연동합니다.
- Vue: 프론트엔드에서 Vue로 로그인 페이지를 구현합니다.
- MongoDB: 사용자 데이터와 세션 정보를 저장합니다.
2. Django 프로젝트 설정
Django와 MongoDB를 연동하기 위해 djongo 또는 pymongo를 설치하고 설정합니다.
pip install django djangorestframework djongo pymongosettings.py 설정
DATABASES = {
'default': {
'ENGINE': 'djongo',
'NAME': 'your_database_name',
'CLIENT': {
'host': 'your_mongodb_host',
'port': 27017,
'username': 'your_username',
'password': 'your_password',
}
}
}
# Django 세션 설정
SESSION_ENGINE = 'django.contrib.sessions.backends.db'
SESSION_COOKIE_AGE = 3600 # 1시간 유지3. 사용자 모델 및 세션 관리 로직 작성
사용자의 각 세션을 고유하게 관리하기 위해 사용자 모델과 세션을 관리하는 기능을 추가합니다.
models.py
from django.db import models
from django.contrib.sessions.models import Session
from django.contrib.auth.models import AbstractUser
class CustomUser(AbstractUser):
last_session_key = models.CharField(max_length=40, blank=True, null=True)views.py
세션을 관리하는 뷰를 작성하여 동일 계정이 다른 브라우저에서 로그인 시 기존 세션을 종료하도록 설정합니다.
from django.contrib.auth import authenticate, login, logout
from django.http import JsonResponse
from django.contrib.sessions.models import Session
from .models import CustomUser
from django.views.decorators.csrf import csrf_exempt
import json
@csrf_exempt
def login_view(request):
if request.method == 'POST':
data = json.loads(request.body)
username = data.get('username')
password = data.get('password')
user = authenticate(request, username=username, password=password)
if user is not None:
# 기존 세션 종료
if user.last_session_key:
try:
old_session = Session.objects.get(session_key=user.last_session_key)
old_session.delete()
except Session.DoesNotExist:
pass
# 새로운 세션 시작
login(request, user)
user.last_session_key = request.session.session_key
user.save()
return JsonResponse({'message': 'Login successful'})
return JsonResponse({'error': 'Invalid credentials'}, status=400)
@csrf_exempt
def logout_view(request):
logout(request)
return JsonResponse({'message': 'Logout successful'})4. Vue 로그인 컴포넌트 구현
Vue에서 Django와 통신하여 로그인 기능을 구현합니다.
Login.vue
<template>
<div>
<h1>Login</h1>
<form @submit.prevent="login">
<input v-model="username" placeholder="Username" required />
<input v-model="password" type="password" placeholder="Password" required />
<button type="submit">Login</button>
</form>
<p v-if="error">{{ error }}</p>
</div>
</template>
<script>
import axios from 'axios';
export default {
data() {
return {
username: '',
password: '',
error: null,
};
},
methods: {
async login() {
try {
const response = await axios.post('http://localhost:8000/api/login/', {
username: this.username,
password: this.password,
});
alert(response.data.message);
this.error = null;
} catch (err) {
this.error = err.response.data.error;
}
},
},
};
</script>5. Django URL 설정
Django의 URL 설정 파일에서 API URL을 설정합니다.
urls.py
from django.urls import path
from .views import login_view, logout_view
urlpatterns = [
path('api/login/', login_view, name='login'),
path('api/logout/', logout_view, name='logout'),
]6. Django에서 세션 미들웨어 설정
세션 정보를 브라우저 별로 관리하기 위해 Django의 세션 미들웨어를 활성화합니다.
settings.py
MIDDLEWARE = [
# 기타 미들웨어...
'django.contrib.sessions.middleware.SessionMiddleware',
'django.middleware.common.CommonMiddleware',
# 기타 미들웨어...
]7. Vue 및 Django 서버 실행
각 서버를 실행하여 통신 테스트를 진행합니다.
# Django 서버 실행
python manage.py runserver
# Vue 프로젝트 실행
npm run serve마무리
이 코드 구조는 각 브라우저 세션을 독립적으로 관리하면서 동일 계정으로 로그인 시 이전 세션을 만료시키는 기능을 갖추고 있습니다.
반응형