Question

我正在使用Thymeleaf和Spring Security。我有一个带有列表项的下拉菜单。不幸的是，由于Thymeleaf + Spring Sec集成使用div，如您在下面看到的，这意味着我们现在的ul的div里面有li。这打破了bootsrap的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元素正确显示？谢谢。

Answer 1

您无需在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>

Answer 2

我决定简单地删除该外部div，而是将sec：authorize放在每个li上。这保留了那些.css依赖项所期望的“ dropdown-menu> li”结构。不利的一面是，这确实意味着我必须在多个li上放置相同的秒：authorize access =“ hasAnyRole（'A_ROLE'，'ANOTHER_ROLE'）”。仍然可以。

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

如何防止将Spring Security与Thymeleaf一起使用破坏CSS格式？

2 个答案: