如何在 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(/&amp;/g, '&');
    </script>

【问题讨论】:

csrf_field() ...
尝试在表单标签之间使用.. 它不起作用 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 刀片加载 vuejs 组件?

如何将vuejs组件与laravel后台仪表盘分离设计。

如何在 laravel 5.3 + VueJs Routes 中导入外部组件

形成 laravel 和 vueJS

如何从 laravel 后端仪表板拆分 vuejs 组件的设计

如何将 Vuejs 组件添加到 Laravel Spark 应用程序?