Django + DRF + Angular:应用呈现来自 auth 包的 JSON 响应而不是重定向

Django + DRF + Angular: app renders JSON response from auth package instead of redirecting

我正在使用 Django 后端、AngularJS 前端和 Django REST Framework (DRF) API 供前端使用的 Web 应用程序。我已经发布了 个关于如何在这种设置中处理身份验证的问题,但我想我已经大致弄清楚了如何去做。我正在使用 django-rest-auth 包并意识到我可以简单地更改提供的 login.html 模板中的表单操作以指向 django-rest-auth 端点之一。登录表单如下所示:

<div class="container">
   <section id="loginForm">
        <form action="/rest-auth/login/?format=json" method="post" class="signin_form" style="font-weight: 400; font-style: normal">
            {% csrf_token %}
            <h1 class="sports_blue">SIGN IN</h1>
                <label for="id_username" class="sr-only control-label">User name</label>
                {{ form.username }}
                <label for="id_password" class="sr-only control-label">Password</label>
                {{ form.password }}
                <input type="hidden" name="next" value="/dashboard" />
                <div class="checkbox">
                    <label>
                        <input type="checkbox" value="remember-me"> Remember me
                    </label>
                </div>
                <input type="submit" value="Sign In" class="btn btn-primary btn-block" />

            {% if form.errors %}
            <p class="validation-summary-errors">Please enter a correct user name and password.</p>
            {% endif %}
            <br />
            <p><b>Don't have an account?</b> <a><b>Sign up for free!</b></a></p>
        </form>
    </section>
   </div>

这会命中 auth 端点并成功登录,但不会呈现 next 中指定的 /dashboard,而是 JSON 响应(用户令牌或错误) 被展示。

我认为这是因为原始 Django 身份验证后端不是 return 纯 JSON,但我不确定如何呈现 next 页面。我应该使用不同的模板吗?或者我是否需要对我的配置进行其他更改以完全删除基本的 Django 身份验证?我仍然在 settings.py:

中安装了 auth 中间件
MIDDLEWARE_CLASSES = (
'django.middleware.common.CommonMiddleware',
'django.contrib.sessions.middleware.SessionMiddleware',
'django.middleware.csrf.CsrfViewMiddleware',
'django.contrib.auth.middleware.AuthenticationMiddleware',
'django.contrib.messages.middleware.MessageMiddleware',
# Uncomment the next line for simple clickjacking protection:
# 'django.middleware.clickjacking.XFrameOptionsMiddleware',
) 

我知道 django-rest-auth 作者也有一个用于此目的的 angular 模块,但是它已经一年多没有更新了,所以我不确定它是否合适使用。有什么方法可以让我将登录信息完全包含在前端而不是使用上面提到的模板吗?

login.html 是一个常用的 Django 模板,因此您似乎没有使用 Angular 作为登录页面。 django-rest-auth 提供的是少数 API 个用于身份验证的端点,即 return JSON。

您正在尝试在前台模式(非AJAX)下从浏览器执行 POST,因此浏览器会向您显示该视图 returns - JSON.端点不考虑?next.

此应用假定您正在使用 Angular 或其他 SPA,这将 POST 使用 AJAX 到这些端点并实现到 ?next 的重定向和其他功能在 Javascript。但不在 Django 模板中的 <form> 中使用 API 端点。

几个选项:

  • 在 Angular 中实现 auth 视图,这将使用 django-rest-auth 端点。或者使用 boilerplate projects.

  • 使用 Django 页面,但将 <form> 指向 Django 的默认登录视图或自定义 常规 Django 视图 不是 API 端点但 returns text/html 或重定向到 ?next.