如何防止使用带有 Thymeleaf 的 Spring Security 破坏 CSS 格式?
Posted
技术标签:
【中文标题】如何防止使用带有 Thymeleaf 的 Spring Security 破坏 CSS 格式?【英文标题】:How can I prevent using Spring Security with Thymeleaf from breaking CSS formatting? 【发布时间】: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 元素?谢谢。
【问题讨论】:
【参考方案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>
【讨论】:
以上是关于如何防止使用带有 Thymeleaf 的 Spring Security 破坏 CSS 格式?的主要内容,如果未能解决你的问题,请参考以下文章
Thymeleaf - 如何将对象(带有子对象)从表单发送回控制器
Spring Boot + MyBatis + Thymeleaf实现简单留言板应用
Spring Boot + MyBatis + Thymeleaf实现简单留言板应用