vue组件中的Csrf标记-Java 学习之路

我有集成了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组件内呈现，我不知道如何导入 MyApp.csrfToken .

<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模板文件中吗？

4 回答

0
作为替代方式：

1-从 <head> 中的 csrf-token 名称获取元标记中的标记：
```
$('meta[name="csrf-token"]').attr('content')
```
2-将它作为道具传递给你的Vue组件：
```
<your-component :csrf-token="{{ csrf_token() }}"></your-component>
```
回复于 2024-04-29T05:44:45+08:00

您可以定义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();
});

希望这可以帮助！

回复于 2024-04-29T05:44:45+08:00

我有同样的问题，我这样解决了 . 我不是很自豪，因为我弄脏了全球范围

添加以下内容：

在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>

回复于 2024-04-29T05:44:45+08:00

在刀片中执行此操作：

<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']

   }

回复于 2024-04-29T05:44:45+08:00

vue组件中的Csrf标记

4 回答

相关问题