Jump to content
AlexandrePrezzi

Login com React + API

Recommended Posts

Boa tarde ...

 

 

Sou iniciante trabalhando com React e estou com uma missão de fazer um sistema  com autenticação de usuário . 

Para esse teste criamos uma API  com apenas o campo de usuário ( nao tem senha por enquanto) ....  


Minha ideia é fazer um formulario em que se a pessoa digitar um usuario válido  esta ok para entrar no sistema

 

Consegui fazer a tela e o acesso a API....  porem quando vou  entrar no sistema me retorna:

 

Seguindo um manual estou com o código da seguinte forma:

 

const requestInfo = {
            method: 'POST',
            body: JSON.stringify(data),
            headers: new Headers({
            'Content-Type': 'application/json',
            }),
        };

        fetch('http://10.0.0.49:9000/login', requestInfo)
        .then(response => {
            console.log(response);
            if(response.ok) {
                return response.json()
            }
            throw new Error("Login inválido...");
        })
        .then(token => {
            localStorage.setItem('token', token);
            this.props.history.push("/admin");
            return;
        })
        .catch(e => {
            this.setState({ message: e.message });
        }); 
    }

 

Queria ver se alguém ja passou por algo parecido... ou se tem alguma sugestão para solução desse problema.

 

Aparece o seguinte erro: Unexpected token V in JSON at position 0

 

Aguardo retornos

 

Obrigado

 

 

 

 

 

Qu

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Similar Content

    • By zuuzu
      Olá, estou desenvolvendo uma api para download de fotos/videos/gif, eu consegui fazer tudo certinho, mas na hora de gerar um link de download aleatório ele gera sempre o mesmo, só gera um link diferente se eu reiniciar o servidor, queria que gerasse um link diferente sempre que eu reiniciasse a página, sem precisar reiniciar o servidor. Tem como alguém me ajudar com isso? *A api está sendo desenvolvida para a automatização de download de fotos/videos/gif*

    • By New Job
      Boa tarde, tenho um site de imobiliária e gostaria de integrar com este sistema.
       
      Documentação API: http://vistasoft.com.br/api/

      Seria para exibir os imóveis no site
      (54) 999350968 (whatsapp).
    • By biakelly
      Oi, tenho uma dúvida para avançar em uma API.
      Preciso somar os valores de todos os endereços exibidos nela. No total deste exemplo tenho 2,484 endereços. A API me deixa exibir no máximo 200 por página
       
      Como exibir total de valores considerando todos endereços
       
      <?php $curl = curl_init(); curl_setopt_array($curl, [ CURLOPT_URL => "https://api.trongrid.io/v1/contracts/TFczxzPhnThNSqr5by8tvxsdCFRRz6cPNq/tokens?only_confirmed=true&only_unconfirmed=true&order_by=balance,desc&limit=200", CURLOPT_RETURNTRANSFER => true, CURLOPT_ENCODING => "", CURLOPT_MAXREDIRS => 10, CURLOPT_TIMEOUT => 30, CURLOPT_HTTP_VERSION => CURL_HTTP_VERSION_1_1, CURLOPT_CUSTOMREQUEST => "GET", CURLOPT_HTTPHEADER => [ "Accept: application/json" ], ]); $response = curl_exec($curl); $err = curl_error($curl); curl_close($curl); if ($err) { echo "cURL Error #:" . $err; } else { echo $response; }  
    • By Guilherme Teixeira
      Olá pessoal tudo bem?
      Sou iniciante em React + Material Ui no node.js
       
      Quanto ao layout estou indo até que bem. Contudo, hoje me deparei com um problema.
      Estou fazendo um formulário de login que irá verificar os dados em um BD Mysql.
      Criei o formulário com hook form e na hora de submeter pretendo passar os dados do formulário por parametro em uma função, ela pesquisar no mysql e retornar o resultado.
      Contudo, na hora que coloquei funções assincronas que tem Promisse no arquivo que irá conectar com o DB o seguinte erro aparece: 
      Unhandled Rejection (TypeError): Net.connect is not a function
      Isso depois que coloquei os códigos para conectar o DB. Como faço para chamar funcões assincornas dentro React então? (a chamada está onde está comentado "Aqui chamo a função"
      Segue o código:
       
      import React, { useState } from 'react'; import Container from '@material-ui/core/Container'; import Grid from '@material-ui/core/Grid'; import Card from '@material-ui/core/Card'; import CardMedia from '@material-ui/core/CardMedia'; import { makeStyles } from '@material-ui/core/styles'; import Typography from '@material-ui/core/Typography'; import FormControl from '@material-ui/core/FormControl'; import Input from '@material-ui/core/Input'; import InputLabel from '@material-ui/core/InputLabel'; import InputAdornment from '@material-ui/core/InputAdornment'; import AccountCircle from '@material-ui/icons/AccountCircle'; import Lock from '@material-ui/icons/Lock'; import Button from '@material-ui/core/Button'; import { useForm } from "react-hook-form"; import Alert from '@material-ui/lab/Alert'; const useStyles = makeStyles((theme) => ({ logotipo: { paddingTop: theme.spacing(6), backgroundColor: theme.palette.background.default, margin: '0 auto', boxShadow: 'none' }, logotipoSegg: { margin: '0 auto', width: '30%' }, centraliza: { textAlign: 'center', paddingTop: theme.spacing(4), }, margin: { marginTop: theme.spacing(2), paddingRight: theme.spacing(2), paddingLeft: theme.spacing(2) }, button: { marginTop: theme.spacing(4), } })); export default function Login() { const { register, handleSubmit, formState: { errors } } = useForm(); const onSubmit = data => { console.log(data) document.getElementById('usuario').setAttribute('disabled', 'true') document.getElementById('senha').setAttribute('disabled', 'true') /*** Aqui chamo a função ******/ const usuario = require('../config/Usuario') console.log(usuario.login) }; const classes = useStyles(); return ( <> <Container maxWidth='lg'> <Grid container direction="row" justify="space-around" alignItems="flex-start" > <Grid item xs={12} sm={6} md={5} > <Card className={classes.logotipo}> <CardMedia component="img" alt='Logotipo Live Experience' image='/images/LogotipoLiveExperience.png' title='Logotipo Live Experience' /> </Card> <Typography variant="h1" component="h1">Sistema de gestão para Restreaming</Typography> <Typography component="p" className={classes.centraliza}>Faça seu login para acessar o sistema</Typography> <form onSubmit={handleSubmit(onSubmit)}> <FormControl className={classes.margin} fullWidth> <InputLabel htmlFor="usuario">Digite seu usuário:</InputLabel> <Input id="usuario" {...register("usuario", { required: true })} startAdornment={ <InputAdornment position="start"> <AccountCircle /> </InputAdornment> } /> </FormControl> {errors?.usuario?.type === "required" && <Alert severity="error">É necessário informar seu usuário acima!</Alert>} <FormControl className={classes.margin} fullWidth> <InputLabel htmlFor="senha">Digite sua senha:</InputLabel> <Input id="senha" type='password' {...register("senha", { required: true })} startAdornment={ <InputAdornment position="start"> <Lock /> </InputAdornment> } /> </FormControl> {errors?.senha?.type === "required" && <Alert severity="error">É necessário informar sua senha acima!</Alert>} <Button fullWidth variant="contained" color="primary" className={classes.button} type="submit">Acessar Sistema</Button> </form> <Typography component="p" className={classes.centraliza}><img src="/images/segg.png" alt='SEGG' className={classes.logotipoSegg} /></Typography> </Grid> </Grid> </Container> </>); } E este é começo do código do Mysql que comecei e na hora que coloquei a conexão deu o erro: 
       
      const mysql = require('mysql2') const connection = mysql.createConnection({ host: 'localhost', user: 'root', password: 'xxxxxxx', database: 'liveexperience' }); function login(dados) { return ('Ok para ' + dados.usuario) } module.exports = {login} Desde já muito obrigado.
    • By augustusdev
      Alguém tem um CPF para teste de API que possua muitos registros de cheque sem fundo, ou seja, que tenha CCF?
×

Important Information

Ao usar o fórum, você concorda com nossos Terms of Use.