Página de Login e Produtos (CRUD) customizada não acessada

Boa noite Lucio, tudo certo?

Faz um teste.

Isso é teu código hoje.

 // Redireciona para a página de produtos
            window.location.href = "http://localhost:8080/produto";

Altera pra isso.

 // Redireciona para a página de produtos
  const url = new URL("http://localhost:8080/produto");
  url.searchParams.set("token", token);
  window.location.href = url.toString();

Lembra que o Spring boot não guarda o estado (STATELESS) como setado na classe SecurityConfigurations, então tens que ficar enviando os token nas requisições, exemplo na tua page produto.html Está assim

fetch('/contas/listar')
                .then(response => response.json())
                .then(contas => {
                    //tem uma tabela aqui
                    });
                    document.body.appendChild(tabela);
                });

Acho que poderia está assim:

fetch('/contas/listar', {
    headers: {
        'Authorization': 'Bearer ' + localStorage.getItem('token')
    }
})
.then(response => response.json())
.then(contas => {
    // código para criar tabela aqui
});

Olá, man mesmo após realizar a sugestão continua negado o acesso.

=(

Olá, tudo bom? Consegui fazer a página de login pegar o token, porem ele pega com um corpo estranho:

localStorage Storage { token: '{"tokenJWT":"eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJpdGF1IiwiaXNzIjoiQVBJIEJBTkNPIFBPQyBkZSBMdWNpbyIsImxvZ2luIjoiaXRhdSIsImV4cCI6MTY3NzUyOTQ3N30.vYfbksFKNb_Mhlq-zVsctouSwVzm4Sse9_L0NfeyrPE"}', tokenJWT: "null", length: 2 }

Está certo?

Depois disso não consigo entrar na minha página dando erro 400

Abaixo o Script e modifiquei, inspirado no que mandou:

 // Envia as informações de login para o backend
    fetch("/login", {
      method: "POST",
      headers: {
        "Content-Type": "application/json"
      },
      body: JSON.stringify(loginData)
    })
    .then(response => {
      // Verifica se a autenticação foi bem-sucedida
      if (response.ok) {
        // Armazena o token de autenticação no local storage
           // Armazena o token de autenticação no local storage
           alert("Login feito com sucesso.");
           response.text().then(token => {
             localStorage.setItem('token', token);
             // Redireciona para a página de produtos
             const url = new URL("http://localhost:8080/produto");
             url.searchParams.set("token", token);
             window.location.href = url.toString();
           });
           // Fecha a janela modal
           modal.style.display = "none";

Da uma refatorada e faz assim para teste.

const LOGIN_URL = "http://localhost:8080/login";
const PRODUCTS_URL = "http://localhost:8080/produto";


const form = document.querySelector('form');

form.addEventListener('submit', function(event) {
    event.preventDefault();
    const email = document.querySelector('#email').value;
    const password = document.querySelector('#password').value;
    authenticateUser(email, password);
});

function authenticateUser(email, password) {
  fetch(LOGIN_URL, {
    method: "POST",
    headers: {
      "Content-Type": "application/json"
    },
    body: JSON.stringify({
        email: email,
        password: password
      })
  })
  .then(response => {
    if (response.ok) {
      const token = response.headers.get("Authorization");

       localStorage.setItem("token", token);
       console.log(localStorage.getItem("token"))

      alert("login successful")
      redirectToProductsPage();
    } else {
      alert("Login falhou. Tente novamente.");
    }
  })
  .catch(error => {
    console.error(error);
  });
}

function redirectToProductsPage() {
  const token = localStorage.getItem("token");
  if (!token) {
    alert("Você não está autenticado. Faça login para acessar esta página.");
    window.location.href = LOGIN_URL;
    return;
  }
  fetch(PRODUCTS_URL, {
    method:"GET",
    headers: {
      Authorization:"Bearer " + token  // `Bearer ${token}`
    }
  })
  .then(response => {
    if (response.ok) {
      window.location.href = PRODUCTS_URL;
    } else {
      alert("Falha ao obter produtos. Tente novamente.");
    }
  })
  .catch(error => {
    console.error(error);
  });
}

Aqui estamos passando o token no parametro da URL mas queremos ele no header

const url = new URL("http://localhost:8080/produto");
             url.searchParams.set("token", token);
             window.location.href = url.toString();

fetch(PRODUCTS_URL, {
    method:"GET",
    headers: {
      Authorization:"Bearer " + token
    }

Olá, Queria dizer que tinha dado certo os tokens, como vc falou com essa alteração, muito obrigado!