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

Posted 2023-02-16

【中文标题】Vue.js 如何像 Django、Laravel 一样创建元标记来存储 `csrftoken`？

【英文标题】：How can Vue.js to create a meta tag to store the `csrftoken` like Django, Laravel?

【发布时间】：2018-08-25 10:32:34

【问题描述】：

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？

---

EDIT-1

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

【参考方案1】：

你可以试试this博客说的。他从 vue 模板中暴露了一个 props。

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

所以我认为你需要先激活“CSRF_USE_SESSIONS”才能使用上面的代码块。

【讨论】：

我的后端是 Django-Rest-Framework 提供 REST API。

啊，好吧，应该第一次添加。但同样的原则仍然适用，你知道如何从 django 生成令牌吗？

你可以查看我找到的这个链接，也许这会有所帮助：link

我使用调试器，在那里，我控制台document.cookie，没有csrftoken和sessionid，当我请求一个api时，它们会出现在请求头中的Cookie中.

如何提出请求？你用了ajax吗？或者当它在页面本身上被请求时？