Реализация вызовов API Vue RESTful в Django в шаблонах Django с аутентификацией сеанса

У меня есть проект Django, который требует обновления страницы каждый раз, когда я хочу обновить контент. В настоящее время он использует встроенные представления на основе классов Django, которые, в свою очередь, используют шаблоны.

Я хочу начать реализацию некоторых вызовов javascript для обновления таблиц / форм / модальных окон новыми данными, в основном в ответ на нажатия кнопок. Я пытаюсь использовать Vue для этого, и я создал бэкэнд Django REST Framework, чтобы облегчить это.

У меня работает простой класс vue «Hello world», в котором данные жестко закодированы в поле данных класса Vue. Однако я не могу перейти к получению данных из API. Я получаю несанкционированный ответ. Я использую vue-resource для вызова HTTP API.

У меня есть модульные тесты, в которых я вызываю API из DRF APITestCase, используя self.client.get ('api / path'), и они работают, как ожидалось (неавторизовано, если к запросу не прикреплен аутентифицированный пользователь, авторизован, если он есть).

Я выполнил отладку в классе разрешений DRF, чтобы понять, почему запрос отклоняется, и это связано с тем, что к запросу не прикреплен аутентифицированный Пользователь.

Я добавил SessionAuthentication в DEFAULT_AUTHENTICATION_CLASSES в настройках.

У меня вопрос: как добавить аутентифицированного пользователя в запрос, чтобы при вызове метода 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();
    }
})