Javascript JavaScript Requisição POST API/JSON

Front-end JavaScript
#1

Boa tarde galera estou com um problema ao codar uma api que séria essa daqui

eu queria uma ajudar de como posso levar o token de autenticação pras demais página para poder enviar os dados, esse atualmente é meu código em java script e tenho um formulário em html que está passando os dados para o javascript para poder enviar para api

function fazPost(url, body)  {
    console.log("Body=", body)
    let request = new XMLHttpRequest()
    request.open("POST", url, true)
    request.setRequestHeader("Content-type", "application/json")
    if(authorization){
    request.setRequestHeader("Authorization", "Bearer  <token>" + authorization)
    }

    request.send(JSON.stringify(body))

    request.onload = function() {
        console.log(this.responseText)
    }

    return request.responseText
}

async function efetuarLogin() {
    event.preventDefault()
    let url = "https://apiacertpixanec.acertpix.com.br/api/Auth/login"
    let nome = document.getElementById("nome").value
    let senha = document.getElementById("senha").value
    console.log(nome)
    console.log(senha)

    user = {
        "username": nome,
        "password": senha
    }
    fazPost(url, user)
}


function cadastrarParceiro() {
    event.preventDefault()
    let url = "api/Partner/Insert"
    let parceiro = document.getElementById("parceiro").value
    let documentNum = document.getElementById("documentNum").value
    let notificationFraudDate = document.getElementById("notificationFraudDate").value
    let debit = document.getElementById("debit").value
    let telephone = document.getElementById("telephone").value
    let address = document.getElementById("address").value
    let city = document.getElementById("city").value
    let state = document.getElementById("state").value


    cadastrarParceiros = {
        "name": parceiro,
        "documentNumber": documentNum,
        "notificationFraudDate": notificationFraudDate,
        "debit": debit,
        "telephone": telephone,
        "address": address,
        "city": city,
        "state": state
      }
      fazPost(url, cadastrarParceiros)
}```
#2

Quando o usuário realizar o login, salva alguns dele lá, tipo:

{
   username: "joao", 
   role: 0,
   token: eyJhbiuygjwlgii98.hjnk==
}

Aí na hora que vc for fazer a nova req, recupera o token do localStorage e pronto

#3

opa cara obrigado pela força, sou meio novato em api teria como me explicar tipo no meu código que não conseguir compreender muito assim

#4

Claro.

Nesse momento que faz o login, pode inserir esse trecho:

async function efetuarLogin() {
    event.preventDefault()
    let url = "https://apiacertpixanec.acertpix.com.br/api/Auth/login"
    let nome = document.getElementById("nome").value
    let senha = document.getElementById("senha").value
    console.log(nome)
    console.log(senha)

    user = {
        "username": nome,
        "password": senha,
    }

    //acredito que esse post aqui em baixo retorna alguns dados, certo?
    const user = await fazPost(url, user);
    
    const userDataStore = {
        username: user.nome,
        token: user.<token>, //Esse <token> é o JWT
        ... //se quiser incluir algo a mais tb, pode incluir
    }

    localStorage.setItem("@meu-sistema", JSON.stringfy(userDataStore));
}

Depois quando vc quiser fazer esse cadastrarParceiro, pode fazer assim:

async function cadastrarParceiro(){
    const tokenAuthorization = JSON.parse(localStorage.getItem("@meu-sistema"));
    
    await fazPost(url, cadastrarParceiros, tokenAuthorization);
}

Aí no seu fazPost, vc pode incluir o argumento do token, deixa ele por ultimo, pq pode ser um parametro opcional.

async function fazPost(url, body, token){
     if(token){
        request.setRequestHeader("Authorization", "Bearer  " + token);
    }
}
#5

Eu mantenho meus Headers do jeito que ta?

Tentei desse jeito aqui porém me apresentou esse erro olha, e aquele post retorna sim o nome de usuário e token, porém na hora de efetuar login eu tenho que acessar usando o cpf ai ele gera o nome do usuario e token abaixo

{“user”:“Jose Antonio”,“token”:“eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9”}

Error que apresentou quando tentei logar: Uncaught ReferenceError: efetuarLogin is not defined

async function efetuarLogin() {

    event.preventDefault()

    let url = "api/Auth/login"

    let nome = document.getElementById("nome").value

    let senha = document.getElementById("senha").value

    console.log(nome)

    console.log(senha)

    user = {

        "username": nome,

        "password": senha,

    }

    //acredito que esse post aqui em baixo retorna alguns dados, certo?

    const user = await fazPost(url, user);

    

    const userDataStore = {

        username: user.nome,

        token: user.eyJodHRwOi8vc2NoZW1hcy54bWxzb2FwLm

    }

    localStorage.setItem("@meu-sistema", JSON.stringfy(userDataStore));

}
#6

obs: Acabei errando a sintaxe do “stringfy”, o correto é: JSON.stringify().

Bom, já que ele retorna esses dados… faz assim:

const user = await fazPost(url, user);
localStorage.setItem("@meu-sistema", JSON.stringify(user));

Sobre esse erro

efetuarLogin is not defined

Onde vc chama essa função “efetuarLogin”?

#7

chamo no meu formulário html deixei somente essa função

const user = await fazPost(url, user);

ele me apresenta esse error
Uncaught (in promise) ReferenceError: can’t access lexical declaration ‘user’ before initialization

agora se eu deixar somente fazPost(url, user); ele loga e me traz o token normal

#8

acabou pegando uma variavel q ja existia, muda pra

1 curtida
#9

@Reset Depois tenta usar a nova API fetch em vez da antiga XMLHttpRequest: Usando Fetch - APIs da Web | MDN

1 curtida
#10

Valeu pela dica lucas, o rodriguesabner conseguiu solucionar o problema para mim.

#11

Ah sim. Usar o fetch nem era a solução mesmo não. Só que é uma solução mais nova do que o antigo XMLHttpRequest.