SpringBoot Thymeleaf 登录重定向到索引加载 html 但不是 css 和 js

Posted 2023-02-27

技术标签:

【中文标题】SpringBoot Thymeleaf 登录重定向到索引加载 html 但不是 css 和 js【英文标题】：SpringBoot Thymeleaf login redirect to index loads html but not css and js 【发布时间】：2021-08-03 10:44:36 【问题描述】：

我有一个 springboot 应用程序，我在其中对用户进行身份验证，如果他已登录，我会将他重定向到 index.html。然而，这个索引页面只加载了普通的 .html，根本没有 js 或 css。我在服务器错误日志和浏览器控制台中都没有看到任何错误。我尝试在我的 css 文件上禁用 spring 安全性，但没有效果。

这是我的项目结构：

资源静态 css_general css_page_specific login.html index.html commons.js

这是我的 application.properties 配置。我已经将 thymeleaf 的默认路径指向静态文件夹，这样我至少可以先运行它。

spring.thymeleaf.prefix=classpath:/static/

我已禁用静态内容的弹簧安全性。这是我的 WebSecurityConfig.java

@Override
protected void configure(HttpSecurity http) throws Exception 

    http.requiresChannel().anyRequest().requiresSecure().and().authorizeRequests().antMatchers("/login","/css_general/**","/css_page_specific/**","/**/*.js","/**/*.css")
        .permitAll()
        .anyRequest()
        .authenticated()
        .and().formLogin(form -> form
            .loginPage("/login")
            .defaultSuccessUrl("/index.html")
            .failureUrl("/login?error=true")
        )
        .sessionManagement().invalidSessionUrl("/login")
        .and()
        .httpBasic()
        .and()
        .logout().logoutRequestMatcher(new AntPathRequestMatcher("/logout")).logoutSuccessUrl("/login")
        .permitAll()
        .and()
        .cors().disable()
        .csrf().disable();


@Override
public void configure(WebSecurity web) throws Exception 
    web.ignoring().antMatchers("/css_general/**", "/css_page_specific/**","/resources/static/css_general/**","/resources/static/css_page_specific/**","/static/css_page_specific/**","/static/css_general/**");

这是我的 LoginController.java

    @Controller
public class LoginController 

    @GetMapping("/login")
    public String showLoginForm(Model model) 

        Authentication authentication = SecurityContextHolder.getContext().getAuthentication();
        if (authentication == null || authentication instanceof AnonymousAuthenticationToken) 
            return "login";
        

        return "redirect:/";
    

    @GetMapping("/logout")
    public String logoutPage(HttpServletRequest request, HttpServletResponse response) 
        Authentication auth = SecurityContextHolder.getContext().getAuthentication();
        if (auth != null)
            new SecurityContextLogoutHandler().logout(request, response, auth);
        
        return "redirect:/";

我的 index.html 上的导入文件：

    <html xmlns:th="http://www.thymeleaf.org"
      xmlns:sec="http://www.thymeleaf.org/extras/spring-security">
<head id="Head1" >
<title>Home</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252"/>
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE11"/>
 <link rel="stylesheet" th:href="@css_page_specific/index.css">
<link rel="stylesheet" th:href="@css_general/toggle-button-modern.css">
<link rel="stylesheet" th:href="@css_general/data-table-modern.css">
<link rel="stylesheet" th:href="@css_general/combobox-modern.css">
<link rel="stylesheet" th:href="@css_general/dropdown-modern.css">
<link rel="stylesheet" th:href="@css_general/radio-modern.css">
<link rel="stylesheet" th:href="@css_general/grid-modern.css">
<link rel="stylesheet" th:href="@css_general/input-modern.css">
<link rel="stylesheet" th:href="@css_general/button-modern.css">

 <script type="text/javascript" th:src="@commons.js"></script>
<script type="text/javascript" th:src="@js_page_specific/index.js"></script>
</head>

但是，在成功登录时，我只看到 index.html 的 html，根本没有加载任何 css 或 js。控制台也没有错误。

我确实看到了来自登录的 302 重定向和索引上的 200。

另外，如果我在浏览器上看到 index.html 的元素选项卡，则 thymeleaf 并没有真正解析 href 标签。

如果在我的浏览器上，我向https://localhost:8443/index.css 发出请求，它只会按原样喷出整个 CSS。

我查看了 *** 上的所有答案，但没有一个解决方案适合我。将不胜感激任何帮助和指导。

【问题讨论】：

如果您在浏览器中看到th: 属性（查看源代码时），Thymeleaf 没有呈现您的模板。您需要配置 Thymeleaf 才能运行。它完美地渲染了 login.html 页面。在这种情况下，Thymeleaf 似乎可以完美解决。另外， index 和 login.html 都在我指向百里香叶的静态内部。如果 thymeleaf 可以找到登录名，我需要做什么才能找到索引？啊，我明白了。你需要一个带有@GetMapping("/index") 注释的方法的控制器，该方法具有return "index";，而你的.defaultSuccessUrl("/index.html") 应该是.defaultSuccessUrl("/index") 我猜。搞定了。你的猜测是对的。非常感谢！ 【参考方案1】：

发生这种情况的原因是因为您将模板存储在 /static 中（这样您就可以访问这些文件，而无需通过 Thymeleaf 的常规解析和渲染过程运行它们）。访问 /index.html 将文件作为静态 html 返回。为了解决这个问题，您需要：

创建另一个控制器（或向您的登录控制器添加另一个方法），通过 Thymeleaf 渲染器为 index.html 提供服务。

 @Controller
 public class IndexController 

   @GetMapping("/index")
   public String showIndex(Model model) 
     return "index";

将您的登录名更改为重定向到/index，而不是/index.html。

 .and().formLogin(form -> form
     .loginPage("/login")
     .defaultSuccessUrl("/index")
     .failureUrl("/login?error=true")
 )

（我建议将您的模板放入一个单独的文件夹中——通常这是在类路径中的某个位置——就像您现在拥有它的方式一样，您让用户能够查看源代码或您的模板，这可能暴露安全漏洞）。

【讨论】：

以上是关于SpringBoot Thymeleaf 登录重定向到索引加载 html 但不是 css 和 js的主要内容，如果未能解决你的问题，请参考以下文章

SpringBoot整合LayUI和Thymeleaf制作简单登录页面

SpringBoot整合bootstrap和thymeleaf制作简单登录界面

Spring Boot 2.1.5.RELEASE - Thymeleaf - 登录页面

SpringBoot Security 整合thymeleaf模板自定义登录页面，按需提示错误信息

原无脑操作：IDEA + maven + Shiro + SpringBoot + JPA + Thymeleaf实现基础认证权限

SpringBoot Thymeleaf 登录重定向到索引加载 html 但不是 css 和 js