Java 后端 + JavaScript 前端 实现按钮级别权限控制的解决方案

Java + JavaScript 前后端协同实现按钮权限控制

在后台管理系统中，不同用户根据角色和数据状态应展示不同的操作按钮，比如编辑、删除、审批、提交等操作。本文将介绍一种通过 Java 后端生成按钮权限 JSON，前端通过 jQuery 解析控制按钮显示的通用方案。

一、功能场景说明

用户访问列表页时，每条记录根据：

当前登录用户角色（省/市/区县）

数据的审核状态（未提交、已提交、审核通过等）

是否本人创建数据

来判断是否显示 编辑 / 删除 / 提交 / 审批 / 撤销 / 变更 / 不同意审批 / 查看详情 等按钮。

二、后端实现步骤（Java）

1. 定义按钮权限字段
   在实体类中新增字段用于存储按钮权限的 JSON 串：

/** 按钮权限 JSON */
private String buttonJson;

2. 按照角色和状态生成按钮权限 Map

public static Map<String, Boolean> getChangeButtonMap(Admin user, int checkStatus, boolean isMyData) {
    Map<String, Boolean> buttons = new HashMap<>();

    Integer cityId = user.getCityId();
    boolean isProvince = cityId == null || cityId == 130000 || cityId == 139901;
    boolean isCity = false;
    boolean isDistrict = false;

    if (!isProvince && cityId != null) {
        if (cityId % 100 == 0) {
            isCity = true;
        } else {
            isDistrict = true;
        }
    }

    // 默认所有按钮为 false
    buttons.put("btn-edit", false);
    buttons.put("btn-submit", false);
    buttons.put("btn-delete", false);
    buttons.put("btn-revoke", false);
    buttons.put("btn-approve", false);
    buttons.put("btn-reject", false);
    buttons.put("btn-change", false);
    buttons.put("btn-detail", true); // 详情始终可见

    // 按角色分配权限
    if (cityId == 130000) { // 超级管理员全部权限
        buttons.replaceAll((k, v) -> true);
    } else if (isProvince || isCity) {
        buttons.put("btn-approve", true);
    } else if (isDistrict) {
        if (checkStatus == 0) {
            buttons.put("btn-delete", true);
        }
    }

    return buttons;
}

3. 在列表处理逻辑中注入权限 JSON

ObjectMapper objectMapper = new ObjectMapper();

for (UnitChange reg : list) {
    boolean isMyData = reg.getCreateBy() != null && reg.getCreateBy().equals(adminId);
    Map<String, Boolean> buttons = getChangeButtonMap(admin, reg.getCheckStatus(), isMyData);

    try {
        String buttonJson = objectMapper.writeValueAsString(buttons);
        reg.setButtonJson(buttonJson);
    } catch (JsonProcessingException e) {
        e.printStackTrace();
    }
}

三、前端实现步骤（JavaScript + HTML）

1. HTML 渲染模板绑定权限数据
   每一行记录的操作按钮区域（假设是一个 ）绑定 data-buttons 属性，并将权限 JSON 输出：
   td 上面要加 属性 ， a标签中也要加上属性

<td class="td-manage" data-buttons='${revoke.buttonJson}'>
   <a class="btn-submit" title="提交" href="javascript:;" onclick="changeStatusSingle(${revoke.id}, 1)" class="ml-5" style="text-decoration:none">
	<input  class="btn btn-primary radius" type="button"  value="提交">
   </a>
   <a class="btn-approve" title="审批" href="javascript:;" onclick="changeStatusSingle(${revoke.id}, 2)" class="ml-5" style="text-decoration:none">
    <input  class="btn btn-warning radius" type="button"  value="审批">
   </a>
   <a class="btn-delete" title="删除" href="javascript:;" onclick="del(${revoke.id})" class="ml-5" style="text-decoration:none">
	<input  class="	btn btn-danger radius" type="button"  value="删除">
   </a>
</td>

注意： class 必须以 btn-xxx 命名，和后端 JSON 的 key 保持一致！

2. jQuery 处理按钮显示隐藏逻辑
   javascript

$(function () {
    $('.td-manage').each(function () {
        var $td = $(this);
        var buttons = {};

        try {
            buttons = JSON.parse($td.attr('data-buttons'));
        } catch (e) {
            console.error("按钮权限 JSON 解析失败", e);
        }

        // 遍历每一个按钮权限，根据布尔值决定是否隐藏
        $.each(buttons, function (key, value) {
            if (!value) {
                $td.find('.' + key).hide();
            }
        });
    });
});

四、效果与优势

✅ 不同用户登录看到的按钮不同

✅ 审核状态改变后页面按钮自动更新（需刷新）

✅ 权限计算逻辑集中在后端，前端只负责渲染

✅ 可扩展性强：只需添加按钮标识即可扩展新功能

五、注意事项

项目 要求

JSON Key 命名 必须与按钮类名一致，如 "btn-submit" 对应

JSON 输出格式 推荐使用 Jackson 的 ObjectMapper.writeValueAsString()

前端 class 使用 每个按钮用独立 class 包装，不能共用 class

安全性 前端控制仅作展示限制，后端仍需权限校验