Django模板JS获取用户编辑权限布尔值报错求助

你的核心问题有两个：一是视图中定义的editable变量未传递到模板上下文，导致JS无法读取；二是Django模板输出的布尔值格式（True/False大写开头）与JS的布尔值格式（true/false小写）不兼容，直接使用会触发语法错误。以下是具体修复步骤：

步骤1：将editable传入模板上下文 #

修改views.py，把editable变量添加到context字典中，同时调整赋值顺序确保值正确：

@login_required
def profile(request, username):
    user = User.objects.get(username=username)
    Profile.objects.get_or_create(user=request.user)
    
    # 先判断当前用户是否为档案所有者
    editable = request.user == user

    if request.method == "POST":
        user_form = UserUpdateForm(request.POST, instance=request.user)
        profile_form = ProfileUpdateForm(request.POST, request.FILES, instance=request.user.profile)

        if user_form.is_valid() and profile_form.is_valid():
            user_form.save()
            profile_form.save()
            messages.success(request, f"Profile successfully updated!")
            return redirect("profile", username=request.user.username)
    else:
        user_form = UserUpdateForm(instance=request.user)
        profile_form = ProfileUpdateForm(instance=request.user.profile)

    # 将editable加入上下文
    context = {
        "user_form": user_form,
        "profile_form": profile_form,
        "editable": editable
    }

    return render(request, "users/profile.html", context)

步骤2：在JS中正确读取布尔值 #

推荐两种安全且兼容的方式：

方法1：使用json_script标签（更安全，避免XSS风险） #

在profile.html的HTML部分先添加序列化后的变量：

{{ editable|json_script:"editable-status" }}

然后在JS中解析这个值：

const button = document.getElementById("button");
// 解析序列化后的布尔值
const editable = JSON.parse(document.getElementById('editable-status').textContent);

button.addEventListener("click", () => {
    const form = document.getElementById("form");

    if(form.style.display === "none" && editable){
        form.style.display = "block";
    }else{
        form.style.display = "none";
    }
});

方法2：使用模板过滤器转换格式 #

直接通过lower过滤器将Django的布尔值转为JS兼容的小写格式：

const button = document.getElementById("button");
// 将True转为true，False转为false
const editable = {{ editable|lower }};

button.addEventListener("click", () => {
    const form = document.getElementById("form");

    if(form.style.display === "none" && editable){
        form.style.display = "block";
    }else{
        form.style.display = "none";
    }
});

额外优化：前端权限控制 #

既然仅档案所有者可编辑，可直接在模板中控制编辑元素的显示，避免无效渲染：

{% if editable %}
<button id="button">编辑档案</button>
<form id="form" style="display: none;">
    <!-- 表单内容 -->
</form>
{% endif %}

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