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

Posted

技术标签:

【中文标题】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