[Dúvida] Recolher dado da resposta da requisição usando Fetch no JS | HTML e CSS

Então, estou fazendo um serviço de autenticação com Spring usando Tokens JWT, e tudo está correndo bem. O front está recebendo uma resposta contendo o token:

E deixarei abaixo o JS responsável por isso:

var form = document.querySelector("#form")

form.addEventListener("submit", (event) => {
    event.preventDefault();

    var formData = new FormData(form);
    var data = Object.fromEntries(formData);
    var jsonData = JSON.stringify(data);

    fetch("http://localhost:8080/login",{
        mode: 'cors',
        method: "POST",
        headers: {
            'Access-Control-Allow-Origin': 'http://localhost:8080',
            'Access-Control-Allow-Credentials': 'true',
            'Content-Type': 'application/json'
        },
        body: jsonData
    })
    .then(response => console.log(response.json()))
    .then(result => {
        console.log(result)
    })
    .catch(err => console.log(err))
})

Tenho dúvida em como recolher especificamente a informação do token. Como se fosse recolher uma informação de uma lista sabe? Já pesquisei bastante e não achei a resposta. Agradeço a ajuda!

Olá Pedro!

Para obter o token JWT retornado pela sua API Spring com o código JavaScript que você forneceu, você pode acessar o campo token no objeto JSON da resposta. A função response.json() retorna uma Promise que precisa ser resolvida. Você está tentando acessar o token antes de a Promise ser resolvida. Você deve corrigir o código da seguinte maneira:

form.addEventListener("submit", (event) => {
    event.preventDefault();

    var formData = new FormData(form);
    var data = Object.fromEntries(formData);
    var jsonData = JSON.stringify(data);

    fetch("http://localhost:8080/login", {
        mode: 'cors',
        method: "POST",
        headers: {
            'Access-Control-Allow-Origin': 'http://localhost:8080',
            'Access-Control-Allow-Credentials': 'true',
            'Content-Type': 'application/json'
        },
        body: jsonData
    })
    .then(response => response.json())
    .then(result => {
        // Agora, você pode acessar o token no objeto result
        var token = result.token;
        console.log("Token JWT: " + token);
    })
    .catch(err => console.log(err));
});

Neste código, o token JWT é acessado no objeto result depois que a Promise retornada por response.json() é resolvida. Certifique-se de que o campo token esteja presente no objeto JSON retornado pela sua API Spring.

Como não tenho acesso completo ao seu projeto, sugiro que este código possa ser um ponto de partida útil. Em resumo, a ideia é transformar a promessa em um objeto e, em seguida, acessar as propriedades desse objeto para melhor gerenciamento e manipulação dos dados.

Espero ter ajudado e reforço que em casos de dúvidas, conte sempre com o fórum da comunidade Alura! Bons estudos!

Sucesso ✨

Um grande abraço e até mais!

Caso este post tenha lhe ajudado, por favor, marcar como solucionado ✓. Bons Estudos!