使用 csrf 令牌时不显示表单答案

【问题标题】：Form is not displaying when using csrf token使用 csrf 令牌时不显示表单
【发布时间】：2019-03-20 07:30:37
【问题描述】：

当点击 Header.vue 中的 onclick 函数时，我得到了 this error，但是当我从 Register.vue 的表单中删除带有 csrf_token 的输入标签时，注册表单将按原样显示应该的。

虽然在通过 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>

【问题讨论】：

我不认为您应该能够在 .vue 文件中使用刀片。所以请为您的令牌考虑这个答案stackoverflow.com/questions/39938284/…
您是从 js 提交表单还是只是进行常规表单提交？

标签： laravel web laravel-5 vue.js csrf

【解决方案1】：

是的，你不能在 vue 模板中放置刀片指令，这就是为什么你的表单没有呈现并且你得到了那个错误，你实际上没有选择一个表单然后你试图访问其上的属性。

如果您使用 axios 从 js 向服务器发出请求，默认的 resources/js/bootstrap.js 文件将向 axios 注册 csrf 令牌，只需确保您仍然将 csrf 令牌放入元字段中在你的布局上是这样的：

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

如果你不使用 axios，你可以从 JS 中的那个元字段访问 csrf 令牌，如下所示：

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

如果你真的需要那个隐藏字段（也许你用常规的 html 提交按钮而不是 js 提交表单）你可以把它放在 vue 组件的“created()”部分：

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

然后在您的模板中：

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

【讨论】：