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

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

0 голосов
/ 15 октября 2018

Когда нажата функция 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>

1 Ответ

0 голосов
/ 16 октября 2018

Да, вы не можете поместить директивы 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">
...