Question

单击Header.vue中的onclick函数时，我得到this error，但是当我从Register.vue中的表单中删除带有csrf_token的输入标签时，然后进行注册表单正在按预期显示。

尽管通过POST提交输入后，我仍然使用标准419（对不起，您的会话已过期。请刷新并重试。）Laravel屏幕。

我确定419屏幕是由缺少CSRF令牌引起的，所以我的最后一个问题是如何在vue.js中实现它？

我正在使用Register.vue组件中的Vue.js和Laravel创建SPA，该组件在网站顶部呈现了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

是的，您不能在vue模板中放入刀刃指令，这就是为什么您的表单未呈现并且收到该错误，您实际上没有选择表单然后尝试访问其上的属性。

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

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

如果您不使用axios，则可以从JS中的该meta字段访问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">

使用CSRF令牌时未显示表单

1 个答案: