如何在Django的AJAX/JQuery中实现用户权限校验？

方案1：页面加载时把权限存入全局变量 #

在页面模板里，用Django模板语法把用户权限提前输出到前端JS变量中，AJAX回调里就能直接判断：

<!-- 在页面的<script>标签里添加 -->
<script>
// 存储当前用户的权限状态
window.userPerms = {
    canChangeAccount: {% if perms.users.change_account %}true{% else %}false{% endif %}
};
</script>

然后在AJAX的成功回调里，用这个全局变量控制编辑按钮的生成：

$.ajax({
    url: '/customers/dev_search',
    method: 'POST',
    data: { /* 你的请求数据 */ },
    success: function(data) {
        // 遍历返回的数据生成HTML
        data.forEach(customer => {
            let itemHtml = `<div class="customer-row">${customer.name}`;
            // 判断权限，有权限就加编辑按钮
            if (window.userPerms.canChangeAccount) {
                itemHtml += `<button class="edit-btn" data-id="${customer.id}">编辑</button>`;
            }
            itemHtml += '</div>';
            $('#customer-container').append(itemHtml);
        });
    }
});

方案2：让AJAX接口返回权限信息 #

修改后端的/customers/dev_search视图，在返回的JSON数据里带上当前用户的权限状态：

from django.http import JsonResponse
from django.contrib.auth.decorators import login_required

@login_required
def dev_search(request):
    # 处理查询逻辑，获取客户数据
    customers = [
        # 你的客户数据查询结果
    ]
    # 构造返回的响应数据，加入权限判断
    response_data = {
        'customers': customers,
        'has_change_perm': request.user.has_perm('users.change_account')
    }
    return JsonResponse(response_data)

前端AJAX回调里直接用返回的权限字段判断：

$.ajax({
    url: '/customers/dev_search',
    method: 'POST',
    data: { /* 你的请求数据 */ },
    success: function(res) {
        const canEdit = res.has_change_perm;
        res.customers.forEach(customer => {
            let itemHtml = `<div class="customer-row">${customer.name}`;
            if (canEdit) {
                itemHtml += `<button class="edit-btn" data-id="${customer.id}">编辑</button>`;
            }
            itemHtml += '</div>';
            $('#customer-container').append(itemHtml);
        });
    }
});

方案3：细粒度权限（每条数据单独判断） #

如果需要针对每条客户数据做不同的权限校验（比如只能编辑自己创建的客户），可以在后端给每条数据加上权限标识：

response_data = {
    'customers': [
        {
            'id': c.id,
            'name': c.name,
            # 这里根据实际业务逻辑判断该条数据是否允许编辑
            'can_edit': request.user.has_perm('users.change_account') and request.user == c.created_by
        } for c in customers
    ]
}

前端直接用数据里的can_edit字段：

success: function(res) {
    res.customers.forEach(customer => {
        let itemHtml = `<div class="customer-row">${customer.name}`;
        if (customer.can_edit) {
            itemHtml += `<button class="edit-btn" data-id="${customer.id}">编辑</button>`;
        }
        itemHtml += '</div>';
        $('#customer-container').append(itemHtml);
    });
}

重要提醒 #

前端的权限判断只是用来控制页面显示，真正的权限校验必须在后端的编辑接口里再做一次。比如用户通过篡改前端代码强行显示编辑按钮，点击后请求编辑接口时，后端要再次检查request.user.has_perm('users.change_account')，避免越权操作。

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