在Laravel中，使用React发送表单时如何包含CSRF令牌的方法

2 年 ago

雅, 悟

1 minute

我研究了如何在使用Laravel的React组件进行表单提交时包含Laravel的CSRF令牌。

想做什么？

通常在使用Laravel提交表单时，需要将CSRF令牌包含在请求中。
在Laravel独有的模板引擎Blade中，可以通过使用@csrf指令生成CSRF令牌。

然而，如果想要在React组件中而不是在Laravel端进行此表单提交，应该如何做呢？因此，本次我将解释一下在React端进行表单提交时如何包含CSRF令牌的方法。

1. 使用Laravel生成csrf令牌

在Laravel中，包括@csrf指令在内，CSRF令牌是Laravel的功能，因此需要在Laravel端生成令牌。
可以使用Laravel的”csrf_token()”函数来生成csrf令牌。

2. 将csrf令牌嵌入到HTML的meta标签中

需要将生成的令牌传递给React。
有多种方法可以传递令牌，但这次我们将使用将其嵌入在HTML的元标记（meta）内的方法。

    <meta name="csrf-token" content="{{ csrf_token() }}">

在React端获取CSRF令牌。

接下来，我们将通过React组件获取在第2步设置的meta标签中的CSRF令牌。
以下是使用TSX编写的示例。
获取令牌的方法有很多种，但在下面的示例中，我们使用了useRef钩子。

const Form = () => {
    const metaCsrfToken = document.querySelector("meta[name='csrf-token']") as HTMLMetaElement;
    const csrfToken = useRef<string>(metaCsrfToken.content);
    ...
}

在Form标签中包含CSRF令牌。

最后，将获取到的csrf令牌放入表单标签中。
通过将input标签的type属性设为“隐藏”，name属性的值设为“_token”，value属性的值设为“令牌”，可以包含csrf令牌。
通过以上步骤，可以实现在Laravel中使用React进行表单提交。

const Form = () => {
    const metaCsrfToken = document.querySelector("meta[name='csrf-token']") as HTMLMetaElement;
    const csrfToken = useRef<string>(metaCsrfToken.content);
    return(
        <form action="/hoge" method="post">
            <input type="hidden" name="_token" value={ csrfToken.current } />
            ....
            <button type="submit">登録</button>
        </form>
    );
}

总结

如果您想在Laravel中实现React端的表单提交，则请按照以下步骤进行操作。

在表单提交时包含令牌

在使用React时，将Laravel的表单与csrf令牌结合的方法的参考网站是：
– Laravel的表单与React结合时包含csrf令牌的方法
– Laravel的CSRF防护中，”@csrf”和”{{ csrf_field() }}”的含义