JS动态添加含sec:authorize的HTML标签权限控制失效求助

Thymeleaf的sec:authorize是服务器端渲染阶段处理的权限控制逻辑——初始页面加载时，服务器会解析标签并根据用户权限决定是否渲染对应的DOM元素。但通过jQuery Ajax动态生成HTML时，新创建的<a>标签不会再经过Thymeleaf的服务器端解析，所以权限控制失效，USER角色用户能看到本应隐藏的ADMIN权限标签。

方案1：后端返回权限标识，前端按需渲染 #

在后端返回的表格数据中，增加一个权限控制字段（比如canShowAdminAction），前端动态生成表格时根据该字段判断是否渲染标签：

• 后端实体/返回DTO添加字段：

  public class ItemDTO {
      // 其他字段
      private boolean canShowAdminAction; // 后端根据当前用户权限赋值
  
      // getter/setter
  }
  

• 前端populateTable函数修改：

  function populateTable(data) {
      const $tbody = $('#your-table tbody');
      $tbody.empty();
      $.each(data, function(index, item) {
          let row = '<tr>';
          // 拼接其他列内容
          row += '<td>';
          // 根据后端返回的权限标识判断是否渲染标签
          if (item.canShowAdminAction) {
              row += `<a href="/edit/${item.id}">编辑</a>`;
          }
          row += '</td></tr>';
          $tbody.append(row);
      });
  }
  

方案2：前端预存用户权限，本地判断 #

页面初始加载时，用Thymeleaf把当前用户的权限渲染到全局变量中，前端动态生成时直接判断：

• 页面添加全局权限变量：

  <script th:inline="javascript">
      // 渲染当前用户的权限列表到全局变量
      window.currentUserAuths = /*[[${#authentication.authorities}]]*/ [];
  </script>
  

• 编写权限判断工具函数，修改populateTable：

  // 判断当前用户是否拥有指定权限
  function hasAuthority(targetAuth) {
      return window.currentUserAuths.some(auth => auth.authority === targetAuth);
  }
  
  function populateTable(data) {
      const $tbody = $('#your-table tbody');
      $tbody.empty();
      $.each(data, function(index, item) {
          let row = '<tr>';
          // 拼接其他列内容
          row += '<td>';
          if (hasAuthority('ADMIN')) {
              row += `<a href="/edit/${item.id}">编辑</a>`;
          }
          row += '</td></tr>';
          $tbody.append(row);
      });
  }
  

方案3：后端渲染HTML片段，Ajax请求已处理权限的内容 #

编写Thymeleaf片段包含权限控制标签，后端接口返回渲染好的片段，前端直接插入页面：

• 创建Thymeleaf片段文件（比如fragments/table-row.html）：

  <tr th:fragment="row(item)">
      <!-- 其他列 -->
      <td>
          <a th:href="@{/edit/{id}(id=${item.id})}" sec:authorize="hasAuthority('ADMIN')">编辑</a>
      </td>
  </tr>
  

• 后端接口返回渲染后的片段：

  @GetMapping("/table-fragments")
  public String getTableFragments(Model model) {
      List<Item> items = yourService.getItems();
      model.addAttribute("items", items);
      // 返回片段内容
      return "fragments/table-row :: row";
  }
  

• 前端Ajax请求并插入：

  function populateTable() {
      $.get("/table-fragments", function(html) {
          $('#your-table tbody').html(html);
      });
  }
  

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