vue 组件中的 Csrf 令牌

2024-04-21

我有集成了 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,但我不知道如何到达那里,因为标准 phpcsrf_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 模板文件?


作为替代方法:

1-从元标记中获取令牌csrf-token里面的名字<head>:

$('meta[name="csrf-token"]').attr('content')

2- 将其作为 prop 传递给您的 Vue 组件:

<your-component :csrf-token="{{ csrf_token() }}"></your-component>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

vue 组件中的 Csrf 令牌 的相关文章

随机推荐

  • 如何在不改变文本颜色的情况下改变光标颜色?

    我想要有光标 FFF而我的字体是 000 那可能吗 您可以定制一个 http beradrian wordpress com 2008 01 08 cross browser custom css cursors input textare
  • 选择 SQL 查询从 ntext 列获取 xml 节点值?

    我想从 NTEXT 列获取一个 xml 节点值 该列包含基于 where 子句查询另一个 xml 节点值的 xml RDBMS 类型 Microsoft SQL Server T SQL这里 我想根据 StoreId where 子句值获取
  • 通过 C API 更改 MySQL 查询分隔符

    如何使用 C API 更改 MySQL 查询分隔符 我尝试发送DELIMITER 作为查询 投诉 the right syntax to use near delimiter at line 1 Tried DELIMITER 也没有运气
  • 提交表单时角度事件成功,它会打开弹出窗口

    我有一个页面通过角度 http post 将数据发布到 ASPNET MVC 页面 当通话结束后 我必须提交一份表格 基本上我做了以下事情
  • 停用所有 conda 环境

    当激活 conda 环境时 conda 会记住之前激活的环境 例如 如果没有激活环境 则调用conda activate foo进而conda deactivate结果没有环境处于活动状态 然而 调用conda activate foo 进
  • 如何使用 PySimpleGui 从列表创建单选按钮?

    我想使用 PySimpleGui 从列表动态创建单选按钮 但我在布局代码中插入循环的努力正在捕获语法错误 这可以通过 API 来完成还是需要使用 tkinter 来完成 我的列表是通过网络驱动器的目标文件搜索生成的 我尝试连接 布局 将单选
  • 模块范围内的全局关键字

    我有一个 Python 文件 其中包含以下几行 import sys global AdminConfig global AdminApp 该脚本在 Jython 上运行 我理解在函数内部使用 global 关键字 但是在模块级别使用 gl
  • 模型中的列表字段?

    在我的模型中 我想要一个包含三元组列表的字段 例如 1 3 4 4 2 6 8 12 3 3 3 9 数据库中是否有一个字段可以存储这些数据 您可以使用 JSON 将其转换为字符串并将其存储为字符串 例如 In 3 json dumps 1
  • jQuery FullCalendar 适用于触摸设备 - 但事件存在小问题

    http page test co uk cal http page test co uk cal 完整日历演示 我已经设置了它 这是一个基本的 jQuery FullCalendar 设置 带有相关的附加功能 以支持触摸设备 链接页面中包
  • 区分大小写 Directory.Exists / File.Exists

    有没有办法区分大小写Directory Exists File Existssince Directory Exists folderPath and Directory Exists folderPath ToLower 都返回true
  • Angular js 2 'node_modules/rxjs/Observable"' 没有导出成员 'Observable'。 import Observable

    我在 Node Modules 包中的 Auth d ts 文件中遇到以下错误 ts 模块 node modules rxjs Observable 没有导出成员 Observable 导入可观察的 找到 Auth d ts 文件的以下代码
  • 如何删除具有特定类名的所有 div?

    使用jquery 删除具有特定类名的所有div的最佳方法是什么 我不想只是隐藏 div 而是完全删除它 所以如果我有这个代码 div class Test div class ABC div class Test 在我调用这个方法 其中 c
  • 如何在 Pygame 表面中实现洪水填充

    我想知道填充 Pygame 表面部分的好方法 我想要的最好的例子是 MS Paint 中油漆桶的工作方式 例如 如果在白色表面上用黑色绘制一个圆圈 我想填充圆圈内的白色 或任何形状 为了让您了解我正在做什么 我正在制作一个像素艺术工具 并且
  • 如何在flutter中重新加载网络图像?

    在flutter中使用网络图像时有时会出现错误Connection closed before full header was received 下面的代码允许我输出错误 但是如何强制小部件重新加载图像 Image network p th
  • 阻止 Visual Studio 在启动时连接到 Team Foundation Server

    Visual Studio 在启动时自动尝试连接到 Team Foundation Server 但有时当您频繁更改 TFS 服务器时 Visual Studio 会在尝试连接到上次使用的 TFS 时花费很长时间超时 如何禁用此功能 您可以
  • 从移动网站中的链接打开电报应用程序

    有什么方法可以从手机中的网站打开电报应用程序吗 我知道如果您使用 telegram 您可以打开 telegram 应用程序 但如何打开 telegram 并使用给定号码创建新对话 我知道可以通过 Whatsapp 之类的方式实现this h
  • 如何创建dll文件

    使用 Visual Studio 2005 我有类文件列表 当我尝试运行类文件时 它显示错误为 输出类型为类库的项目无法直接启动 如何运行类文件 如何创建 dll 文件 我是 Visual Studio 2005 的新手 需要帮忙 A Cl
  • 在 React Native 渲染文本组件中显示动画值

    我无法在渲染器上显示动画的值并返回此错误 不变违规 对象作为 React 子对象无效 发现 带有键 value 的对象 如果您打算渲染子集合 请改用数组 当然 我看到了其中的价值console constructor props super
  • C# 计算两个日期之间的工作日数

    如何获取两个给定日期之间的工作日数 而无需迭代之间的日期并计算工作日 看起来相当简单 但我似乎找不到符合以下条件的结论性正确答案 总数应包含在内 因此 GetNumberOfWeekdays new DateTime 2009 11 30
  • vue 组件中的 Csrf 令牌

    我有集成了 Vue js 的 Laravel 5 3 项目 我想使用CSRF TOKEN以我的形式 表单html代码在Vue组件文件中 resources assets js bootstrap js 我有这个 Vue http inter