Question

我正在学习Django2，并尝试使用csrf_token和ajax创建登录页面。

我希望如果用户还没有登录，那将转到登录页面并在登录之前发送变量next作为页面的标签。如果用户成功登录，则可以转到主页或由next标记的页面。

我阅读了Django2的文档，并尝试编写如下代码，但是，当我单击“登录”按钮时，它只是刷新登录页面而没有错误

我很困惑，还不知道。请帮助。

登录视图：

def login(request):
    if request.is_ajax():
        uf = UserForm(request.POST)
        if uf.is_valid():
            # get info from form
            username = uf.cleaned_data['username']
            password = uf.cleaned_data['password']
            user = auth.authenticate(request, username=username, password=password)
            if user is not None:  # user match
                auth.login(request, user)
                if request.GET.get('next'):
                    next_url = request.GET.get('next')
                    return JsonResponse({'redirect_url': next_url})
                    # return redirect(request.GET.get('next'))
                else:
                    return JsonResponse({'redirect_url': 'home'})
            else:  # user not match
                error_msg = ["username or pwd mistake"]
                return JsonResponse({'error_msg': error_msg})
    else:
        uf = UserForm()
    return render(request, 'login.html', {'uf': uf})

html：

    <form>
      {% csrf_token %}
       {{ uf.username }}
       {{ uf.password }}
      <div id="errorMsg"></div>
        <button type="submit" class="btn btn-default" id="loginButton">login</button>
     <input type="hidden" name="next" id="redirect-next" value="{{ next|escape }}"/>
   </form>

jQuery：

       $("#loginButton").click(function () {
    $.ajax({
        url: "",
        type: 'POST',
        dataType: "json",
        data: {username: $("#inputEmail3").val(), password: $("#inputPassword3").val()},
        beforeSend: function (xhr, settings) {
            var csrftoken = Cookies.get('csrftoken');
            function csrfSafeMethod(method) {
                // these HTTP methods do not require CSRF protection
                return (/^(GET|HEAD|OPTIONS|TRACE)$/.test(method));
            }
            if (!csrfSafeMethod(settings.type) && !this.crossDomain) {
                xhr.setRequestHeader("X-CSRFToken", csrftoken);
            }
        },
        success: function (result) {
            if (result.error_msg) {
                $('#errorMsg').show().text('user info error') //print an alert on the page
            }
            else {
                location.href = result.redirect_url //turn to homepage or page before login
            }
        }
    })
});

Answer 1

您无需费心编写自己的登录视图。 Django提供了更简单的方法来实现它。

首先请确保您的settings.py中包含以下内容

MIDDLEWARE_CLASSES = [
    ...
    'django.contrib.auth.middleware.AuthenticationMiddleware',
    ...
]
INSTALLED_APPS = [
    ...
    'django.contrib.auth',
    'django.contrib.contenttypes',
    ...
]

将所有登录URL添加到主urls.py：

from django.urls import path
from django.conf.urls import include


urlpatterns = [
....
    path('accounts/', include('django.contrib.auth.urls')),
....
]

不要忘记运行python manage.py migrate来创建auth应用程序所需的表。现在，应用程序和URL已准备就绪，需要创建模板。该应用程序的所有模板都应放在registration目录下名为templates的文件夹下。目录结构应类似。

your_django_app/
    templates/
        registration/
            login.html
    __init__.py
    apps.py
    settings.py
    urls.py
    views.py
    wsgi.py

login.html的内容应类似于：

<form id="loginform" action="{% url 'login' %}" method="POST">
{% csrf_token %}
{% if next %}
    <input type="hidden" name="next" value="{{ next }}" />
{% endif %}
    <input name="username" id="id_username" type="text">
    <label>Username</label>
    <input name="password" id="id_password" type="password">
    <label>Password</label>
{% if form.errors %}
    Error! Wrong credentials.
{% endif %}
    <button type="submit">Login</button>
</form>

在此之后，将它们包括在您的settings.py文件中，以便在登录后正确重定向用户。

LOGIN_REDIRECT_URL = '/'
LOGIN_URL = '/accounts/login'

您都准备好了。在尝试进行此操作之前，请确保至少创建一个用户，方法是运行python manage.py createsuperuser。对于需要用户在查看之前登录的所有页面，可以在其相应视图功能上方使用@login_required装饰器将其重定向到登录页面，然后再显示该页面。示例：

from django.shortcuts import render
from django.contrib.auth.decorators import login_required

@login_required
def home(request):
    return render(request, 'home/index.html')

Answer 2

这里有一种使用ajax解析csrf_token的简短方法：

在脚本标签内。

    $.ajax({
           url: window.location.pathname,
           type: 'POST',
           data: {
                 ......,
                // Note this step.
                'csrfmiddlewaretoken': "{{ csrf_token }}"
                },
                success: function() {
                   .....
                }
    });

希望事情能顺利进行，因为我已使用它在2个基于Django的项目中解析了csrf_token。干杯！

Answer 3

这可能与此issue

有关

当您的按钮尝试提交表单，但您希望它由脚本处理时。

尝试将按钮类型更改为

type="button"

django2中ajax的csrf令牌

3 个答案: