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;}}// 默认所有按钮为 falsebuttons.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
安全性 前端控制仅作展示限制，后端仍需权限校验