vue 组件中的 Csrf 令牌答案

【问题标题】：Csrf token in vue componentvue 组件中的 Csrf 令牌
【发布时间】：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 模板文件中？

【问题讨论】：

标签： php vue.js laravel-5.3 csrf vuejs2

【解决方案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"

【讨论】：