如何在没有 jinja 的情况下从 Flask-wtf 获取 CSRF 令牌？

Question

我能找到的所有文档和示例都使用“{{ csrf_token() }}”插入令牌。我不能这样做，因为我在 Vue 模板中工作（它不会被 jinja 解析）

我的 index.html 文件由 Jinja 解析，所以我怀疑解决方案可能涉及此问题，但我不知道从哪里开始。

编辑：如果我用

把它放在 index.html 中

 <p>{{ csrf_token() }} </p>

它按预期显示，但我不确定如何将其放入我的表单/axios 请求中

Answer 1

您将拥有一个使用 Vue 加载页面的基本 jinja 模板。

在我的特殊情况下，我是这样做的：

对于动态内容：

index.html

{% block content %}
  <div id="vue-container" backend-data="{{ csrf_token() }}"></div>
  <script nonce="{{ csp_nonce() }}">
      $('#vue-container').data('backend_current_user', {{ current_user_data | tojson }});
  </script>
{% endblock %}

{% block scripts %}
  <script src="{{ asset_url_for('index.js') }}"></script>
{% endblock %}

（注意这里使用了两种方法：元素属性和JQuery。实际上我更频繁地使用JQuery方法，因为它更灵活地处理JSON数据）

index.js

import Vue from 'vue'
import Index from '@/components/Index.vue'

new Vue({
  render: function (h) {
    return h(Index, {
      props: {
        backendData: this.$el.attributes.backendData.value,
        backendCurrentUser: $('#vue-container').data('backend_current_user'),
      }
    })
  }
}).$mount('#vue-container')

index.Vue

<script>
export default {
  name: 'Index',
  props: {
    'backendCurrentUser': Object,
    'backendData': String
  },
...

对于静态内容：

实际上对于 csrf 令牌，我只是将它放在页面上足够高的脚本中以首先加载：

base.html 或 index.html 标头

<script type=text/javascript nonce="{{ csp_nonce() }}">
   $CSRF_TOKEN = '{{ csrf_token() }}';
</script>

然后在模板/mixins 中使用它：

  methods: {
    ajax_: function (url, action, formData, cb) {
      // eslint-disable-next-line
      formData.csrf_token = $CSRF_TOKEN || null