如何防止使用带有 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 格式?的主要内容,如果未能解决你的问题,请参考以下文章

SpringBoot--Thymeleaf入门使用

Thymeleaf - 如何将对象(带有子对象)从表单发送回控制器

Spring Boot + MyBatis + Thymeleaf实现简单留言板应用

Spring Boot + MyBatis + Thymeleaf实现简单留言板应用

页面重定向取决于使用 Spring 安全性和 Thymeleaf 的角色 - Spring

Thymeleaf 构造带有变量的 URL