如何防止使用带有 Thymeleaf 的 Spring Security 破坏 CSS 格式？答案

【问题标题】：How can I prevent using Spring Security with Thymeleaf from breaking CSS formatting?如何防止使用带有 Thymeleaf 的 Spring Security 破坏 CSS 格式？
【发布时间】：2019-03-31 12:12:04
【问题描述】：

我正在使用 Thymeleaf 和 Spring Security。我有一个包含列表项的下拉菜单。不幸的是，由于 Thymeleaf + Spring Sec 集成使用如下所示的 div，这意味着我们现在有 ul 和 li 内部。这打破了引导程序中的 css 格式，而更少的期望 ul>li。换句话说， li 应该是下拉列表 ul 的直接子级，但在我的情况下不是因为 sec:authorize div。以下是这些 css 依赖项：picture.

<ul class="dropdown-menu text-left">
    <li>
        <a role="button" class="a-primary btn-xs" data-bind="click: $parent.view"><span class="fa fa-search"></span> View</a>
    </li>
    <div sec:authorize access="hasAnyRole('A_ROLE', 'ANOTHER_ROLE')">
        <li>
            <a role="button" class="a-primary btn-xs" data-bind="visible: permissions().contains('Edit'), click: $parent.edit"><span class="fa fa-pencil"></span> Edit</a>
        </li>
        (more <li> elements in here)
    </div>
</ul>

所以第一个 li 显示正确，但是 sec:authorize div 中的 li 格式不正确。

如何在不编辑我所依赖的 .css 文件的情况下正确显示内部 li 元素？谢谢。

【问题讨论】：

标签： html css spring-security frontend thymeleaf

【解决方案1】：

我决定简单地删除那个外部 div，而是将 sec:authorize 放在每个 li 上。这保留了那些 .css 依赖项所期望的“下拉菜单> li”结构。不利的一面是，这确实意味着我必须将相同的 sec:authorize access="hasAnyRole('A_ROLE', 'ANOTHER_ROLE')" 放在多个 li 上。尽管如此，它仍然有效。

编辑：没关系，使用上面标记的解决方案。

【讨论】：

【解决方案2】：

您无需在div 中添加您的授权。您可以改用th:block，它不会创建任何额外的元素。

<th:block sec:authorize="hasAnyRole('A_ROLE', 'ANOTHER_ROLE')">
    <li>
        <a role="button" class="a-primary btn-xs" data-bind="visible: permissions().contains('Edit'), click: $parent.edit"><span class="fa fa-pencil"></span> Edit</a>
    </li>
</th:block>

【讨论】：