跨域环境下Django与Vue双向登录同步实现方案咨询

一、Django端登录后跳转Vue自动完成登录 #

实现思路 #

Django登录成功后生成JWT，通过跳转URL的查询参数传递给Vue，Vue拿到token后完成本地登录状态初始化。

具体步骤 #

1. Django端生成token并跳转
   在Django的登录视图中，验证用户身份成功后生成JWT，重定向到Vue的指定页面并携带token：

   # Django views.py
   from django.shortcuts import redirect
   from rest_framework_simplejwt.tokens import RefreshToken
   
   def django_login_view(request):
       # 常规登录验证逻辑...
       user = request.user
       refresh = RefreshToken.for_user(user)
       access_token = str(refresh.access_token)
       # 跳转到Vue的自动登录页面，携带token
       return redirect(f"https://your-vue-domain.com/auto-login?token={access_token}")
   

2. Vue端处理token并完成登录
   在Vue中创建auto-login路由页面，获取URL中的token参数，完成本地登录状态设置：

   // Vue3 路由组件示例
   import { useRoute, useRouter } from 'vue-router'
   import { useStore } from 'vuex'
   
   export default {
     setup() {
       const route = useRoute()
       const router = useRouter()
       const store = useStore()
       const token = route.query.token
   
       if (token) {
         // 存储token到本地
         localStorage.setItem('vue_auth_token', token)
         // 调用接口获取用户信息，更新全局状态
         store.dispatch('getUserInfo', token)
         // 跳转到首页或目标页面
         router.push('/')
       } else {
         // 无token则跳转到Vue登录页
         router.push('/login')
       }
       return {}
     }
   }
   

3. 安全优化

   • 必须使用HTTPS传输，防止token在网络中被窃听
   • 给跳转用的token设置短有效期（如5分钟），或生成一次性授权码，Vue拿到后向Django接口换取正式JWT
   • Django端验证授权码/临时token的合法性，仅允许来自Vue域名的请求换取正式token

二、Vue端登录后同步Django端登录 #

实现思路 #

Vue登录成功后获取JWT，调用Django的跨域同步登录接口，Django验证token后手动设置session登录状态并返回跨域cookie。

具体步骤 #

1. Django端编写同步登录接口
   该接口接收Vue传来的JWT，验证后为用户创建Django session，并设置跨域cookie：

   # Django views.py
   from rest_framework.views import APIView
   from rest_framework.response import Response
   from rest_framework.permissions import AllowAny
   from rest_framework_simplejwt.authentication import JWTAuthentication
   from django.contrib.auth import login
   
   class SyncDjangoLoginAPI(APIView):
       permission_classes = [AllowAny]
   
       def post(self, request):
           token = request.data.get('token')
           if not token:
               return Response({'error': 'Token required'}, status=400)
           
           # 验证JWT有效性
           auth = JWTAuthentication()
           try:
               validated_token = auth.get_validated_token(token)
               user = auth.get_user(validated_token)
           except Exception as e:
               return Response({'error': 'Invalid token'}, status=401)
           
           # 手动创建Django登录session
           login(request, user)
           # 设置跨域session cookie
           response = Response({'msg': 'Django login synced'})
           response.set_cookie(
               'sessionid',
               request.session.session_key,
               secure=True,
               httponly=True,
               samesite='None'
           )
           return response
   

2. Vue端调用同步接口
   Vue登录成功后，携带token调用Django的同步接口，开启withCredentials以允许跨域携带cookie：

   // Vue登录逻辑示例
   import axios from 'axios'
   
   async function vueLogin(username, password) {
       const loginRes = await axios.post('https://your-vue-domain.com/api/login', { username, password })
       const accessToken = loginRes.data.access_token
       localStorage.setItem('vue_auth_token', accessToken)
       
       // 同步Django登录
       await axios.post(
           'https://your-django-domain.com/api/sync-django-login',
           { token: accessToken },
           { withCredentials: true }
       )
   }
   

3. Django跨域配置
   安装并配置django-cors-headers以允许跨域请求：

   # Django settings.py
   INSTALLED_APPS = [
       # ...其他应用
       'corsheaders',
   ]
   
   MIDDLEWARE = [
       'corsheaders.middleware.CorsMiddleware',
       'django.middleware.common.CommonMiddleware',
       # ...其他中间件
   ]
   
   CORS_ALLOWED_ORIGINS = [
       "https://your-vue-domain.com",
   ]
   
   CORS_ALLOW_CREDENTIALS = True
   
   # 配置session cookie支持跨域
   SESSION_COOKIE_SECURE = True
   SESSION_COOKIE_SAMESITE = 'None'
   

通用注意事项 #

• 所有传输必须使用HTTPS，避免敏感信息泄露
• JWT有效期需合理设置，同时实现刷新token逻辑以维持登录状态
• 跨域cookie需满足Secure=True、SameSite=None、HttpOnly=True，防止XSS和CSRF攻击
• 若追求更高安全性，可采用OAuth2授权码模式替代直接传递token，但实现复杂度更高

内容的提问来源于stack exchange，提问作者crawlingdev