如何在Vue JS模板中校验Django权限并解决v-show权限访问问题

你遇到的这个问题其实是Django模板渲染和Vue渲染的执行顺序冲突导致的，我来给你拆解下原因和解决办法：

为什么会报错？ #

Django是先渲染页面的，当它看到{{perms.auth.has_permission}}时，会直接把它替换成True或者False（注意是大写的）。这时候你的标签代码在浏览器里会变成：

<label ... v-show="(!is_existing) && False">...</label>

而Vue在解析这个表达式的时候，会把False当成一个Vue实例上的属性/方法名，但你的Vue实例里根本没定义False这个变量，所以就会抛出「Property or method "False" is not defined」的错误。

三种可行的解决办法 #

1. 把Django权限注入到Vue实例中（推荐）

在Django模板里，先把权限值转换成JavaScript能识别的布尔值，然后挂载到全局或者Vue组件的props里：

<!-- 在页面的<script>标签里定义全局变量 -->
<script>
window.djangoPerms = {
  // 用lower过滤器把Django的True/False转成小写的true/false
  hasPermission: {{ perms.auth.has_permission|lower }}
};
</script>

然后在Vue组件里直接使用这个全局变量：

<label for="input" class="ui right floated icon button" :class="color" v-show="(!is_existing) && djangoPerms.hasPermission">
  <i class="file text icon"></i> Upload
</label>

这种方式的好处是权限值可以在整个Vue应用里复用，而且类型是正确的布尔值，不会有歧义。

2. 直接在模板里转成Vue识别的布尔值

如果你不想用全局变量，也可以直接在Django模板里把权限值转成小写的true/false，这样Vue会把它当成布尔值而不是变量：

<label for="input" class="ui right floated icon button" :class="color" v-show="(!is_existing) && {{ perms.auth.has_permission|lower }}">
  <i class="file text icon"></i> Upload
</label>

Django渲染后会变成v-show="(!is_existing) && true"，这时候Vue就能正确解析这个布尔值了。

3. 用Django模板直接控制标签渲染

如果这个标签的显示权限不需要动态变化（比如用户登录后权限就固定了），你可以直接用Django的模板标签来控制是否渲染这个标签，完全不用Vue的v-show：

{% if perms.auth.has_permission %}
<label for="input" class="ui right floated icon button" :class="color" v-show="!is_existing">
  <i class="file text icon"></i> Upload
</label>
{% endif %}

这种方式更直接，在页面渲染阶段就决定了标签是否存在，适合权限不会在前端动态改变的场景。

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