在 Django 模板中使用会话身份验证在 Django 中实现 Vue RESTful API 调用答案

【问题标题】：Implementing Vue RESTful API calls in Django within Django Templates with Session Authentication在 Django 模板中使用会话身份验证在 Django 中实现 Vue RESTful API 调用
【发布时间】：2020-07-09 19:15:15
【问题描述】：

我有一个 Django 项目，只要我想更新内容，就需要刷新页面。目前它使用内置的 Django 基于类的视图，而后者又使用模板。

我想开始实现一些 javascript 调用以使用新数据刷新表格/表单/模态窗口，主要是响应按钮单击。我正在尝试使用 Vue 来实现这一点，并且我已经创建了一个 Django REST Framework 后端来促进这一点。

我有一个简单的“Hello world”vue 类，其中数据被硬编码到 Vue 类的数据字段中。不过，我似乎无法跳到从 API 获取数据。我收到未经授权的回复。我正在使用 vue-resource 进行 HTTP API 调用。

我有单元测试，我使用 self.client.get('api/path') 从 DRF APITestCase 调用 API，它们按预期工作（当没有经过身份验证的用户附加到请求时未经授权，当有授权时是）。

我已经调试到 DRF Permission 类以查看请求被拒绝的原因，这是因为请求没有附加经过身份验证的用户。

我已将 SessionAuthentication 添加到设置中的 DEFAULT_AUTHENTICATION_CLASSES。

我的问题是，如何在请求中添加经过身份验证的用户，以便当从我的 webapp 中调用 Vue 方法时，API 请求将被授权？

我不确定这是否会使事情复杂化，但我在 Django 中使用自定义用户模型进行身份验证。

我希望首先在我的网站上实现一些 Vue 控件，例如提到的表格和表单。我不想把它变成一个单页应用程序。我想继续使用 Django 视图进行用户身份验证。

我的 Vue 代码是这样的；

new Vue({
    delimiters: ['${', '}$'],
    el: '.events-table',
    data: {
        message: 'Hello Vue!',
        demo: [
            { id: 5 },
            { id: 2 },
            { id: 3 },
        ],
        events: [],
    },
    http: {
        root: 'http://localhost:8000',
    },
    methods: {
        getEvents: function () {
            this.$http.get('api/eventlog/events/?format=json').then(
                function (data, status, request) {
                    if (status == 200) {
                        this.events = data.body.results;
                    }
                }
            )
        }
    },
    mounted: function () {
        this.getEvents();
    }
})

【问题讨论】：

标签： python django vue.js vue-resource

【解决方案1】：

我像这样更改了 http 属性

http: {
    root: window.location.origin,
},

现在它似乎认识到请求来自经过身份验证的会话。

【讨论】：