1
resposta

Utilizar o CSS e o JS em arquivos separados

Olá a todos,

Já finalizei o curso de Spring MVC: Autenticação com Spring Security e tentei dar uma incrementada no projeto, separando os arquivos CSS e JS, criando os mesmos em pastas dentro de resources/static. Acontece que depois que inseri o interceptor, os mesmos não são mais carregados. Antes funcionava normalmente.

WebSecurityConfig

@Override
    protected void configure(HttpSecurity http) throws Exception {
        http.authorizeRequests().antMatchers(HttpMethod.GET, "/home/**").permitAll()
                .antMatchers("/**/*.css", "/**/*.js").permitAll()
                .antMatchers(HttpMethod.GET, "/api/pedidos/aguardando").permitAll().anyRequest().authenticated().and()
                .formLogin(form -> form.loginPage("/login").permitAll().defaultSuccessUrl("/usuario/pedido", true))
                .logout(logout -> logout.logoutUrl("/logout").logoutSuccessUrl("/home")).csrf().disable();
    };

WebConfig

@Override
    protected void addInterceptors(InterceptorRegistry registry) {
        registry.addInterceptor(new InterceptadorDeAcessos()).addPathPatterns("/**").excludePathPatterns("/css/**",
                "/js/**");
    }

base.html

<link rel="stylesheet" href="../../css/styles.css" type="text/css" />

oferta/home.html

<script src="../../js/main.js"></script>

No console aparece o seguinte:

2020-10-10 16:00:39.380 WARN 11377 --- [nio-8080-exec-2] o.s.web.servlet.PageNotFound : No mapping for GET /css/styles.css 2020-10-10 16:00:39.386 WARN 11377 --- [nio-8080-exec-3] o.s.web.servlet.PageNotFound : No mapping for GET /js/main.js

Tentei adicionar o código abaixo e não funcionou

@Override
    public void configure(WebSecurity web) throws Exception {
        web.ignoring().antMatchers("/css/**", "/js/**");
    }

Como eu faço para liberar os arquivos CSS e JS?

1 resposta

Oie Kleber, tudo bem contigo?

Perdão pela demora!

Para fazer os imports do js e css no html você irá precisar usar 2 tags "especiais" do thymeleaf, para o css é o th:href, no código ficaria assim:

<link th:href="@{/css/estilo.css}" rel="stylesheet">

Já o para o js é necessário usar o th:src, no código ficaria assim:

<script type="text/javascript" th:src="@{/js/script.js}"></script>

Veja se assim funciona!

Se tiver qualquer outro problema estarei por aqui :)