Форма не отображается при использовании токена csrf

Question

Когда onclick нажата функция в Header.vue Я получаю эту ошибку, но когда я удаляю тег ввода с csrf_token из формы в Register.vue, тогда форма регистрации показывает, как и положено.

Хотя после отправки входных данных методом POST у меня остается стандарт 419 (извините, ваш сеанс истек. Пожалуйста, обновите и попробуйте снова.) Экран Laravel.

Я уверен, что экран 419 вызван отсутствием токена CSRF, поэтому мой последний вопрос: как мне реализовать его в vue.js?

Я использую Vue.js и Laravel для создания SPA, в моем компоненте Register.vue, который отображает onclick поверх сайта я добавил токен CSRF следующим образом:

<template>
        <form id="registerForm" class="register-container" action="registerUser" method="post">
      <input type="hidden" name="_token" value="{{ csrf_token() }}">
            <div class="register-container__form">
        <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
          <input class="mdl-textfield__input" name="email" type="text">
          <label class="mdl-textfield__label">Email</label>
        </div>
    .
    .
    .
    </template>

onclick Функция, которая выскакивает регистрационную форму, находится в Header.vue:**

<template>
.
.
.
    <nav class="mdl-navigation">
   <a class="mdl-navigation__link" href="" v-on:click.prevent="registerPopUp()">Sign In</a>
    </nav>

 <register-form/>
</template>

<script>

 import Register from './Register.vue'

 export default {
  components: {
   'register-form': Register
  },
  methods: {
   registerPopUp: () => {
    let loginForm = document.getElementById('loginForm');
    let registerForm = document.getElementById('registerForm');
    loginForm.style.display = "none";
    registerForm.style.display = "block";

    window.onclick = (e) => {
     if(e.target == registerForm)
      registerForm.style.display = "none";
    }
   }
  }
 }
</script>

Answer 1

Да, вы не можете поместить директивы blade в шаблон vue, поэтому ваша форма не рендерится, и вы получаете эту ошибку, вы фактически не выбрали форму, а затем пытаетесь получить доступ к свойству в теме.

Если вы используете axios для отправки запросов к серверу из js, файл resources/js/bootstrap.js по умолчанию зарегистрирует токен csrf с помощью axios, просто убедитесь, что токен csrf все еще размещен в мета-поле вашего макета. как это:

<meta name="csrf-token" content="{{ csrf_token() }}">

Если вы не используете axios, вы можете получить доступ к токену csrf из этого метаполя в JS следующим образом:

let token = document.head.querySelector('meta[name="csrf-token"]');

Если вам действительно нужно это скрытое поле (возможно, вы отправляете форму с помощью обычной кнопки отправки в формате html, а не js), вы можете поместить это в раздел "create ()" компонента vue:

this.csrf_token = document.head.querySelector('meta[name="csrf-token"]');

а затем в вашем шаблоне:

<input type="hidden" name="_token" :value="csrf_token">