如何在 vuejs 组件中使用 laravel csrf 令牌
Posted
技术标签:
【中文标题】如何在 vuejs 组件中使用 laravel csrf 令牌【英文标题】:how to use laravel csrf token inside vuejs component 【发布时间】:2017-11-16 15:17:28 【问题描述】:我正在尝试在 vue 组件中使用表单。问题是它不接受我的 csrf 令牌。我尝试使用多种方式添加它,使用
!! csrf_field()!! // the component does not render after this
然后我尝试添加 xcsrf
blade.php
>meta name="csrf-token" content=" csrf_token() ">
然后将其添加到脚本中
$.ajaxSetup(
headers:
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
); //this gives error token mismatch
然后我尝试像这样将 xcsrf 添加到挂载函数中
mounted()
this.csrf = window.laravel.csrfToken
// I get the error csrfToken of undefined
这是我的代码 app.js
//new vue component
Vue.component('search', require('./components/Searchnames.vue'));
component.vue
<template>
<div class="row">
<form class="col-md-12" action='/table' method="POST">
<input type="hidden" name="_token" :value="csrf">
<h1 class="mainheading">
I have found the following names matching your search
</h1>
<br/>
<br/>
<br/>
<div class='names_container' v-for="name in names">
<button class=" btn-default btn-block glow-border names" type='submit' v-on:click="getName">
name.label.eng
</button>
</div>
</form>
</div>
</template>
<script>
export default
data: function ()
return
names: [],
selected: "",
csrf: ""
;
,
methods:
getData: function ()
let self = this;
self.$http.jsonp(url,
jsonpCallback: "JSON_CALLBACK"
)
.then(response =>
response.body.map(function (obj)
if (obj.type == 'org')
self.names.push(obj)
);
console.log(JSON.stringify(this.names))
)
,
getName: function (element)
this.selected = element.target.innerText
,
mounted: function ()
this.csrf = window.laravel.csrfToken ;
this.getData();
</script>
blade.php 模板
@section('content')
<div>
<search></search>
</div>
@endsection
<script>
var url = ' $url '.replace(/&/g, '&');
</script>
【问题讨论】:
尝试在表单标签之间使用.. 它不起作用 i gt 此错误属性或方法“csrf_field”未在实例上定义,但在渲染期间被引用。确保在 data 选项中声明反应数据属性。发现于 【参考方案1】:试试这个
Vue.http.interceptors.push(function (request, next)
request.headers['X-CSRF-TOKEN'] = Laravel.csrfToken;
next();
);
然后试试这个或将它添加到您的 app.blade.php 标头中:
<script>
window.Laravel = <?php echo json_encode([
'csrfToken' => csrf_token(),
]); ?>
</script>
【讨论】:
感谢第二个选项有效,但后来我在 /table 页面得到 TokenMismatchException 这意味着令牌不匹配。尝试清除缓存或刷新页面/请求。是否在所有视图共享的标题中? 你的意思是csrf令牌?是的,它在所有视图共享的 app.blade.php 中 参考这个laracasts.com/discuss/channels/vue/…以上是关于如何在 vuejs 组件中使用 laravel csrf 令牌的主要内容,如果未能解决你的问题,请参考以下文章
如何在 laravel 5.3 + VueJs Routes 中导入外部组件