无法将csrf_token设置为隐藏输入框值的技术问题求助

这个坑我之前也踩过，咱们来一步步拆解原因和解决办法：

问题根源 #

当你在<div>里直接写{{csrf_token}}时，Django模板引擎会优先把这个变量渲染成真实的token字符串，而Vue不会去修改普通<div>的内容，所以能正常显示。

但给隐藏输入框加上v-model="csrf_token"后，Vue初始化组件时会接管这个输入框的value值——它会把输入框的内容替换成Vue实例中csrf_token数据属性的初始值。如果你的Vue实例里没定义这个属性，或者初始值是空的，那Django渲染的token就会被清空，自然看不到内容了。

几种可行的解决方案 #

方案1：让Vue初始化时拿到Django渲染的token

直接在Vue的data里把csrf_token初始化为Django的模板值，这样Vue接管输入框时就会用这个值：

<!-- HTML部分 -->
<input type="hidden" id="csrf_token" v-model="csrf_token">

// Vue实例部分
new Vue({
  el: '#app',
  data: {
    // 让Django先把token渲染到这里
    csrf_token: '{{csrf_token}}'
  }
})

方案2：去掉v-model，直接获取DOM值

如果不需要双向绑定（毕竟csrf token一般是只读的），完全可以不用v-model，通过DOM或者Vue的ref来获取值：

<input type="hidden" id="csrf_token" value="{{csrf_token}}" ref="csrfToken">

然后在Vue里获取：

// 用ref获取
const csrfToken = this.$refs.csrfToken.value;
// 或者直接通过DOM获取
const csrfToken = document.getElementById('csrf_token').value;

方案3：用meta标签存csrf token（推荐）

这是业界更常用的做法，既避免了输入框的冲突，也更简洁：
首先在页面头部加个meta标签：

<meta name="csrf-token" content="{{csrf_token}}">

然后在Vue里写个简单的方法读取它，发起请求时直接用：

function getCsrfToken() {
  return document.querySelector('meta[name="csrf-token"]').content;
}

// 比如用axios发POST请求时
axios.post('/your-api-url', yourData, {
  headers: {
    'X-CSRFToken': getCsrfToken()
  }
})

内容的提问来源于stack exchange，提问作者Qback