Как получить токен CSRF от Flask-wtf без jinja? - PullRequest
Новая
       38

Как получить токен CSRF от Flask-wtf без jinja?

0 голосов
/ 03 июня 2019

Все документы и примеры, которые я могу найти, вставьте токен, используя "{{csrf_token ()}}".Я не могу этого сделать, потому что я работаю внутри шаблонов Vue (которые не анализируются jinja)

Мой файл index.html анализируется Jinja, поэтому я подозреваю, что решение может включать это, но я неНе знаю, с чего начать.

Редактировать: если я помещу его в index.html с 

 <p>{{ csrf_token() }} </p>

, он будет выглядеть, как и ожидалось, но я не уверен, как получить это в моих формах/ Axios запросов

1 Ответ

1 голос
/ 03 июня 2019

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

В моем конкретном случае я так и делаю:

Для динамического содержимого:

index.html 

{% block content %}
  <div id="vue-container" backend-data="{{ csrf_token() }}"></div>
  <script nonce="{{ csp_nonce() }}">
      $('#vue-container').data('backend_current_user', {{ current_user_data | tojson }});
  </script>
{% endblock %}

{% block scripts %}
  <script src="{{ asset_url_for('index.js') }}"></script>
{% endblock %}

(обратите внимание, что здесь используются два метода: атрибут элемента и JQuery. На самом деле я использую метод JQuery чаще, поскольку он более гибок с данными JSON)

index.js 

import Vue from 'vue'
import Index from '@/components/Index.vue'

new Vue({
  render: function (h) {
    return h(Index, {
      props: {
        backendData: this.$el.attributes.backendData.value,
        backendCurrentUser: $('#vue-container').data('backend_current_user'),
      }
    })
  }
}).$mount('#vue-container')

index.Vue 

<script>
export default {
  name: 'Index',
  props: {
    'backendCurrentUser': Object,
    'backendData': String
  },
...

Для статического содержимого:

На самом деле для токена csrf я просто помещаю его в сценарий, достаточно высокий для загрузки страницы:

base.html или index.html headers 

<script type=text/javascript nonce="{{ csp_nonce() }}">
   $CSRF_TOKEN = '{{ csrf_token() }}';
</script>

и затем используйте это внутри шаблонов / миксинов: 

  methods: {
    ajax_: function (url, action, formData, cb) {
      // eslint-disable-next-line
      formData.csrf_token = $CSRF_TOKEN || null
...