vue 组件中的 Csrf 令牌
Posted
技术标签:
【中文标题】vue 组件中的 Csrf 令牌【英文标题】：Csrf token in vue component 【发布时间】：2017-05-15 13:27:42 【问题描述】：我有集成了 Vue.js 的 Laravel 5.3 项目，我想在我的表单中使用 CSRF-TOKEN。表单html代码在Vue组件文件中
resources / assets / js / bootstrap.js
我有这个：
Vue.http.interceptors.push((request, next) =>
request.headers.set('X-CSRF-TOKEN', MyApp.csrfToken);
next();
);
然后我有主 vue 文件/resources/assets/js/app.js:
require('./bootstrap');
Vue.component('callbackwindow', require('./components/callbackwindow.vue'));
const app = new Vue(
el: '#app',
data: ,
);
然后在 Vue 文件中我需要使用 csrf_field，但我不知道如何获取它，因为标准 php csrf_field() 未在 Vue 组件中呈现，我不知道如何导入 @987654328 @。
<template>
<div class="modal fade" >
<form @submit.prevent="submitForm" name="callback" method="POST" action="/" role="form" class="form-horizontal" enctype="multipart/form-data">
!! csrf_field() !!
...form code here...
</form>
</div>
</template>
<script>
export default
</script>
是否可以将 MyApp.csrfToken 变量从这里导入到我的 Vue 模板文件中？
【问题讨论】：
【参考方案1】：作为替代方式：
1- 从csrf-token 名称在<head> 内的元标记中获取令牌：
$('meta[name="csrf-token"]').attr('content')
2- 将其作为道具传递给您的 Vue 组件：
<your-component :csrf-token=" csrf_token() "></your-component>
【讨论】：
通过这些方式，您无需定义全局变量并增加代码的复杂性:)【参考方案2】：如果您在主模板中为 csrf 令牌编写了元标记，请尝试此操作。
<template>
<form action = "/user/checkout" method="POST">
<input type="hidden" name="_token" v-bind:value="csrf">
....
</form>
</template>
在组件的脚本标签中：
<script>
export default
data()
return
//csrf token
csrf: document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
</script>
【讨论】：
我对 csrf 令牌感到沮丧，并尝试了很多方法，但你的方法对我有用！谢谢你先生，你救了我的一天！【参考方案3】：在刀片中执行此操作：
<Example-component csrf="csrf_token()"></Example-component>
在 Vue 组件中执行此操作：
In form
<input type="hidden" name="_token" v-bind:value="csrf">
In Script
export default
props: ['csrf', 'oldName']
【讨论】：
【参考方案4】：您可以定义您的 csrf 令牌的一种方法是将以下内容添加到您的主要刀片文件的 head 部分：
<script>
var MyApp =
csrfToken: " csrf_token() "
</script>
或者，您可以使用 cookie 库之类的导入，并改用 xsrf 令牌。
使用 npm：
npm install cookie
用纱线：
yarn add cookie
然后在您的bootstrap.js 文件中：
import cookie from "cookie";
Vue.http.interceptors.push((request, next) =>
request.headers.set('X-XSRF-TOKEN', cookie.parse(document.cookie)['XSRF-TOKEN']);
next();
);
希望这会有所帮助！
【讨论】：
我有这一切。但我认为我必须添加 !!各种形式的 csrf_field() !!。不是吗？ 如果您不打算使用 Vue 提交表单，您只需将其添加到每个表单中，否则它将始终自动添加到请求中。 我用 vue 提交了我的表单。为什么在这种情况下我不需要添加 csrf_field？ ...因为上面的代码将在每个请求中作为标头添加。【参考方案5】：我有同样的问题，我这样解决了。我不是很自豪，因为我弄脏了全球范围
通过添加以下内容：
在 app.blade.php 中
<script>
var Laravel =
'csrfToken' : 'csrf_token()'
;
在我的任何组件/子组件 MyComponent.vue:
<form method="POST" action="/my/path" class="pull-right">
<input type="hidden" name="_token" :value="csrf">
<input class="btn" type="submit" value="Modify" />
</form>
<script>
export default
data()
return
csrf: "",
,
mounted()
this.csrf = window.Laravel.csrfToken;
</script>
【讨论】：
【参考方案6】：制作一个令牌然后分配它
<script>
export default
data()
return
token: '',
,
async created()
this.token = document.querySelector('meta[name="csrf-token"]').getAttribute('content')
</script>
我用的是Iview，所以就这样用了
:headers="'x-csrf-token' : token"
但通常你会使用
v-bind:value="token"
【讨论】：
以上是关于vue 组件中的 Csrf 令牌的主要内容，如果未能解决你的问题，请参考以下文章
如何使用 AJAX 请求 Laravel + Vue.js 传递 CSRF 令牌