已有HTML页面，如何用Django实现自定义模态登录并限制课程访问

完全理解你的困扰——Django默认的登录视图确实样式太朴素，和自定义前端页面格格不入。好在我们完全可以抛弃它，用自己的模态表单来实现登录逻辑，同时搞定课程的权限限制。下面是一步步的实现方案：

1. 自定义登录视图（处理AJAX请求） #

因为你的登录表单是模态框，提交后不需要跳转页面，所以我们要写一个支持AJAX的视图函数，代替Django自带的LoginView：

# views.py
from django.contrib.auth import authenticate, login
from django.http import JsonResponse
from django.views.decorators.csrf import csrf_protect

@csrf_protect
def ajax_login(request):
    if request.method == 'POST':
        # 从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({'status': 'success', 'message': '登录成功！'})
        else:
            return JsonResponse({'status': 'error', 'message': '用户名或密码错误'}, status=400)
    # 非POST请求直接返回错误
    return JsonResponse({'status': 'error', 'message': '无效请求'}, status=400)

然后把这个视图加到路由里：

# urls.py
from django.urls import path
from . import views

urlpatterns = [
    path('', views.index, name='index'),
    path('ajax-login/', views.ajax_login, name='ajax_login'),
    # 其他路由...
]

2. 前端模态表单的AJAX提交 #

接下来要修改你index.html里的模态表单，让它通过AJAX提交数据，而不是默认的表单跳转：

首先，确保表单里包含CSRF令牌（Django默认会在模板里生成，直接调用即可）：

<!-- 模态框里的登录表单 -->
<form id="loginForm">
    {% csrf_token %}
    <div class="form-group">
        <label for="username">用户名</label>
        <input type="text" class="form-control" id="username" name="username" required>
    </div>
    <div class="form-group">
        <label for="password">密码</label>
        <input type="password" class="form-control" id="password" name="password" required>
    </div>
    <button type="submit" class="btn btn-primary">登录</button>
    <div id="loginMessage"></div>
</form>

然后添加JavaScript处理提交逻辑（如果用Bootstrap模态框，可直接复用下面的代码）：

<script>
document.getElementById('loginForm').addEventListener('submit', function(e) {
    e.preventDefault(); // 阻止默认表单跳转
    
    // 获取表单数据和CSRF令牌
    const formData = new FormData(this);
    const csrfToken = document.querySelector('[name=csrfmiddlewaretoken]').value;
    
    fetch('{% url "ajax_login" %}', {
        method: 'POST',
        headers: {
            'X-CSRFToken': csrfToken,
        },
        body: formData
    })
    .then(response => response.json())
    .then(data => {
        const messageElement = document.getElementById('loginMessage');
        if (data.status === 'success') {
            messageElement.textContent = data.message;
            messageElement.className = 'text-success';
            // 登录成功后的操作：关闭模态框、更新页面导航、刷新课程列表
            $('#loginModal').modal('hide');
            // 示例：替换登录按钮为用户信息
            document.getElementById('loginBtn').style.display = 'none';
            document.getElementById('userInfo').textContent = `欢迎，${data.username || '{{ user.username }}'}`;
            document.getElementById('userInfo').style.display = 'block';
            // 若课程列表需刷新，可在此重新加载课程区域
        } else {
            messageElement.textContent = data.message;
            messageElement.className = 'text-danger';
        }
    })
    .catch(error => {
        console.error('登录请求出错:', error);
        document.getElementById('loginMessage').textContent = '登录失败，请稍后重试';
        document.getElementById('loginMessage').className = 'text-danger';
    });
});
</script>

3. 课程访问权限控制 #

登录逻辑搞定后，接下来要限制课程的访问权限，分两个层面实现：

视图层面的权限控制 #

对于课程详情页或列表页，用@login_required装饰器限制未登录用户访问：

# views.py
from django.contrib.auth.decorators import login_required

@login_required
def course_detail(request, course_id):
    # 你的课程详情逻辑
    course = Course.objects.get(id=course_id)
    return render(request, 'course_detail.html', {'course': course})

@login_required
def course_list(request):
    # 可根据需求过滤用户有权限的课程，比如按用户组/关联关系
    courses = Course.objects.all()
    return render(request, 'course_list.html', {'courses': courses})

如果用基于类的视图，就用LoginRequiredMixin：

from django.contrib.auth.mixins import LoginRequiredMixin
from django.views.generic import DetailView

class CourseDetailView(LoginRequiredMixin, DetailView):
    model = Course
    template_name = 'course_detail.html'

模板层面的权限控制 #

在index.html或课程列表模板里，判断用户是否登录，决定是否显示课程内容：

{% if user.is_authenticated %}
    <!-- 已登录用户看到的课程列表 -->
    <div class="course-list">
        {% for course in courses %}
            <div class="course-card">
                <h3>{{ course.title }}</h3>
                <a href="{% url 'course_detail' course.id %}" class="btn btn-info">查看课程</a>
            </div>
        {% endfor %}
    </div>
{% else %}
    <!-- 未登录用户看到的提示，引导登录 -->
    <div class="alert alert-info">
        请登录后查看课程内容 <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#loginModal">立即登录</button>
    </div>
{% endif %}

额外提示 #

• 如果需要更细粒度的权限（比如某些课程仅对特定用户组开放），可以结合Django的PermissionRequiredMixin，或给Course模型添加多对多字段关联User，实现自定义权限逻辑。
• 默认@login_required会将未登录用户重定向到/accounts/login/，你可以在settings.py里设置LOGIN_URL为首页，或者在视图里返回JSON提示前端触发登录模态框。

这样一套下来，既能保留你自定义的模态登录表单，又能完美实现课程的访问权限控制啦！

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