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

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

0 голосов
/ 29 марта 2020

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

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

У меня есть простой класс 'Hello world' vue, работающий где данные жестко закодированы в поле данных класса Vue. Я не могу сделать скачок для получения данных из API, хотя. Я получаю несанкционированный ответ. Я использую vue -ресурс для вызова 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();
    }
})

1 Ответ

0 голосов
/ 29 марта 2020

Я изменил свойство http следующим образом 

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

и теперь, похоже, распознает, что запрос поступил из аутентифицированного сеанса.

...