django vue实现登录
Django 与 Vue 实现登录功能
后端 Django 配置
创建 Django 项目并安装必要依赖：
pip install django djangorestframework django-cors-headers配置 settings.py：
INSTALLED_APPS = [
...
'rest_framework',
'corsheaders',
]
MIDDLEWARE = [
...
'corsheaders.middleware.CorsMiddleware',
]
CORS_ORIGIN_ALLOW_ALL = True # 开发时允许所有跨域请求创建用户认证视图（views.py）：
from rest_framework.views import APIView
from rest_framework.response import Response
from django.contrib.auth import authenticate, login
class LoginView(APIView):
def post(self, request):
username = request.data.get('username')
password = request.data.get('password')
user = authenticate(request, username=username, password=password)
if user is not None:
login(request, user)
return Response({'status': 'success'})
return Response({'status': 'error'}, status=400)配置路由（urls.py）：
from django.urls import path
from .views import LoginView
urlpatterns = [
path('api/login/', LoginView.as_view()),
]前端 Vue 实现
安装 Vue 和相关依赖：
npm install vue axios vue-router创建登录组件（Login.vue）：
<template>
<div>
<input v-model="username" placeholder="Username">
<input v-model="password" type="password" placeholder="Password">
<button @click="handleLogin">Login</button>
</div>
</template>
<script>
import axios from 'axios';
export default {
data() {
return {
username: '',
password: ''
}
},
methods: {
handleLogin() {
axios.post('http://localhost:8000/api/login/', {
username: this.username,
password: this.password
}).then(response => {
if (response.data.status === 'success') {
this.$router.push('/dashboard')
}
})
}
}
}
</script>配置路由（router.js）：
import Vue from 'vue'
import Router from 'vue-router'
import Login from './components/Login'
Vue.use(Router)
export default new Router({
routes: [
{ path: '/login', component: Login }
]
})前后端联调
启动 Django 开发服务器：
python manage.py runserver启动 Vue 开发服务器：
npm run serve确保 Django 的 CORS_ORIGIN_ALLOW_ALL 设置为 True，以便 Vue 应用可以访问 Django 后端接口。
安全性增强
生产环境中应添加以下安全措施：
- 使用 HTTPS
- 配置更严格的 CORS 策略
- 添加 CSRF 保护
- 实现 JWT 认证替代 session
常见问题解决
跨域问题：确保 django-cors-headers 已正确安装和配置。
认证失败：检查 Django 用户模型中是否存在对应的用户，并确认密码正确。
路由问题：确保 Vue 路由和 Django URL 配置没有冲突。
