带有 Laravel 6 的 Svelte.js：表单中的 csrf 令牌答案

【问题标题】：Svelte.js with Laravel 6: csrf token in form带有 Laravel 6 的 Svelte.js：表单中的 csrf 令牌
【发布时间】：2020-03-22 06:52:18
【问题描述】：

我正在创建一个使用 Svelte.js 和 Larvel 6 作为后端的应用程序 (wewowweb/laravel-svelte-preset)。如何获取表单的 csrf 令牌？表达式@csrf 显示为纯文本。

【问题讨论】：

我不确定如何回答您的问题（不熟悉 svelte），但请注意，@csrf 在.js 文件中不起作用；它是一个 Laravel 助手，仅在 .php 文件中可用。
也许只有一个http请求？
不能肯定。如果您在.blade.php 文件中加载svelte.js，则可以在包含svelte.js 之前定义let _TOKEN = "{{ csrf_token() }}"，并且可以在后续请求中使用_TOKEN。或者，您可以根据需要禁用csrf（不推荐，但可以）
那行得通。非常感谢！

标签： laravel csrf svelte csrf-token

【解决方案1】：

要更新这个问题：使用 Laravel 8 和 Svelte，我简单地从 resources/views/auth/register.blade.php 文件中删除了所有代码保存表单和 @crf（忽略 Tailwindcss）：

@extends('layouts.app')
@section('content')
<form data-register method="POST" action="{{ route('register') }}"
 class="min-h-screen flex items-center justify-center py-12 px-4 sm:px-6 lg:px-8">
  @csrf
  <script src="{{ asset('js/register.js') }}"></script>
</form>
@endsection

如果您希望您的表单完全在 Svelte 中，以便您可以异步执行它或将其绑定到其他组件，您可以只调用 @csrf 本身，而不是表单。然后，您必须将一些代码放入您的 .svelte/.js 文件中，以将 PHP 创建的输入 pre-load 移动到 SVELTE 创建 post-load 的表单中，然后您'重做！可能类似于（未经测试，只是猜测并假设表单上有一个数据寄存器属性）

import { onMount } from "svelte"

onMount(() => {
  let token = document.getElementsByName('_token')
  let form = document.querySelector('[data-register] form')
  if(token && form){
    form.appendChild(token[0])
  }
}

我已经测试了 PHP 的方式，就像 CHARM 一样工作。 JS方式一直抛出419错误，所以我基本上只是选择了选项1。

【讨论】：