0

我正在开发一个网页。我在这个网页上有一个登录表单。我将 Django 用于后端，将 VueJS 用于前端。要使用 Django 提交表单，Django 的要求是 CSRF Token。我目前可以使用{{ csrf_token }}.

因为我使用的是 VueJS，所以我也使用 Vuetify 来设置前端的样式。CSRF 令牌对 VueJS 不可见，因为 VueJS 无法识别{{ csrf_token }}，但 HTML 可以。

在互联网上搜索后，我发现了一些东西。我尝试使用 v-bind 将 CSRF 令牌从 HTML 提供给 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"
        },
    },
..............
............

我希望 VueJS 可以访问 CSRF Token 的价值。

4

2 回答 2

0

哈罗德·哈德瓦德博士，

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

请试试这个代码

<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

于 2019-05-13T13:33:23.583 回答
0

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

索引.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 %}
于 2019-05-13T13:34:25.220 回答