Question

我正在开发一个网页。我在此网页上有一个登录表格。我将Django用于后端，将VueJS用于前端。要使用Django提交表单，Django的要求是CSRF令牌。我目前可以使用{{ csrf_token }}将CSRF令牌显示为HTML。

因为我使用的是VueJS，所以我也使用Vuetify设置了前端样式。 VueJS无法看到CSRF令牌，因为VueJS不能识别{{ csrf_token }}，而HTML可以识别。

在互联网上研究后，我发现了一些东西。我尝试使用v-bind将HTML的CSRF令牌提供给VueJS，但不幸的是，v-bind的值未定义。但是，如果我转到源代码（Ctrl + U），则可以看到CSRF Toekn可以工作，但VueJS无法识别它。

示例：

<div id="LoginApp">
    <WJLogin
        v-bind:csrf="8cl33zQ8pYXXEMVCoSsqIzaFgQkLh6WYXqsQMN4z9X4oGkSGN8Thz922jQ19aG4B"
        v-bind:hello="world">
    </WJLogin>
</div>

当我使用从VueJS到VueJS的v-bind时，此方法有效，但从HTML到VueJS则无效

这是login.html

<div id="LoginApp">
    <WJLogin
        :csrf="{{csrf_token}}"
        :hello="world">
    </WJLogin>
</div>

这是WJLogin.vue

export default
{
    props: {
        csrf: String,
        hello: {
            type: String,
            default: "defaultValue"
        },
    },
..............
............

我希望CSRF令牌的值可用于VueJS。

Answer 1

博士哈罗德·哈德瓦尔德

我不明白，但是您的组件被认为是错误的。

请尝试此代码

<div id="LoginApp">
  <WJLogin
    :csrf="csrf_token"
    :hello="world">
  </WJLogin>
</div>

<template>
  <!-- If it is fixed -->
  <div>{{ $props.csrf }}</div>
</template>

<script>
export default {
  name: 'W3Login',
  props: {
    csrf: String
  },
  // If it will be change.
  computed: {
    token() {
      return this.$prop   
    } 
  }
  methods: {
    If using in any method.
    x() {
      ...
      this.$prop.csrf
      ... 
    }
  }
}
</script>

示例链接JsFiddle

Answer 2

您不应该使用v-bind:csrf，因为当django渲染csrf_token时，它将是文字的（例如，不是变量）。 V-bind用于将对象绑定到组件prop。这样做：

index.html：

<div id="LoginApp">
    <wjlogin
            csrf="{{ csrf_token }}"
            hello="world">
    </wjlogin>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
{% verbatim %}
<script>
    Vue.component('wjlogin', {
        template: `<div>{{ csrf }}<br/>{{ hello }}</div>`,
        name: 'wjlogin',
        props: {
            csrf: String,
            hello: {
                type: String,
                default: "defaultValue"
            },
        },
    });

    new Vue({el: '#LoginApp'})
</script>
{% endverbatim %}

如何将数据从html（Django后端）发送到js（Vue前端）

2 个答案: