Блог

Я включил компонент формы Vue в один из моих шаблонов Django. Теперь я хотел бы отправить токен CSRF вместе с данными, поскольку для представлений Django требуется токен CSRF. Могу ли я каким-либо образом включить его в свою форму Vue?

Вот мой компонент:

 <template>
  <form @submit.prevent="formSubmit()">
    <input type="text" class="form-control" v-model="amount">
    <br>
    <input type="text" class="form-control" v-model="price">
    <br>

    <button class="btn btn-primary" style="width: 100%">BUY</button>
  </form>
</template>
     
<script>

import axios from 'axios'

export default {

  mounted() {
      console.log('Component mounted.')
  },

  data() {
      return {
        name: '',
        description: '',
        output: ''
      };
  },
  methods: {
      formSubmit() {
          let currentObj = this;
          axios.post('MY_URL', {        
              price: this.price,
              amount: this.amount,
          })

          .then(function (response) {
            currentObj.output = response.data;
          }.bind(this))

          .catch(function (error) {
              currentObj.output = error;
          });
      },
  }
}

</script>
 

Сначала получите токен из файла csrftoken cookie:

 function getCookie(name) {
    let cookieValue = null;
    if (document.cookie amp;amp; document.cookie !== '') {
        const cookies = document.cookie.split(';');
        for (let i = 0; i < cookies.length; i  ) {
            const cookie = cookies[i].trim();
            // Does this cookie string begin with the name we want?
            if (cookie.substring(0, name.length   1) === (name   '=')) {
                cookieValue = decodeURIComponent(cookie.substring(name.length   1));
                break;
            }
        }
    }
    return cookieValue;
}
const csrftoken = getCookie('csrftoken');
 

… или из запроса document :

 const csrftoken = document.querySelector('[name=csrfmiddlewaretoken]').value
 

Затем добавьте значение токена в свой POST заголовок:

 axios.post('MY_URL', {
    price: this.price,
    amount: this.amount,
  }, {
    headers: {
      'X-CSRFToken': csrftoken
    }
  })