Question

Vue.js模板如何创建像this这样的元标记：

除了检查CSRF令牌作为POST参数之外，VerifyCsrfToken中间件还将检查X-CSRF-TOKEN请求头。例如，您可以将令牌存储在HTML元标记中： <meta name="csrf-token" content="{{ csrf_token() }}">

但是<meta name="csrf-token" content="{{ csrf_token() }}">是使用服务器语言，Vue.js如何创建元标记来存储csrftoken？

修改-1

我的项目是Django-Rest-Framework作为后端，Vue.js作为前端。它们是前端和后端的分离（Apis）。

Answer 1

您可以尝试this博客所说的内容。他从vue模板中暴露了道具。

//Add this to your vue js
<script>
export default {
    props: ['csrfToken'],
    mounted () {
        // Do something useful with the data in the template
        console.dir(this.csrfToken)
    }
}
</script>

<!-- Add this to your html/php/template -->
<sample-component :csrf-token="'{!! csrf_token() !!}'">
</sample-component>

修改

对不起，我周末出去了，我不熟悉django-rest-framework，所以我不能再帮忙了。但我尝试并阅读了一些关于此的文档。这是我在网上找到的两个文件; this和this

第一个链接指出：

如果激活CSRF_USE_SESSIONS，则必须在HTML中包含CSRF令牌，并使用JavaScript从DOM读取令牌：

{% csrf_token %} <script type="text/javascript"> // using jQuery var csrftoken = jQuery("[name=csrfmiddlewaretoken]").val(); </script>

所以我认为你需要激活＆＃34; CSRF_USE_SESSIONS＆＃34;首先，您可以使用上面的代码块。

Vue.js如何创建一个元标记来存储像Django，Laravel这样的`csrftoken？

1 个答案: