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
安全性 前端控制僅作展示限制，后端仍需權限校驗