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 Giovanird
      Olá a todos!
      Tenho uma api  Sala de Aula e dentro dela o id de cada aluno. Em outra api, API ALUNO,  tenho os dados de cada aluno:  nome, foto, endereço.
      Estou fazendo o foreach da api Sala de Aula e preciso também retornar os dados de cada aluno.
      Segue o código que não estou conseguindo desenvolver
      $sala = file_get_contents("https://api/sala?id=987"); $sala = json_decode($sala, true); $sala = $sala['data']; foreach ($sala as $resulsala){ $codigoaluno = $resulsala['idaluno']; $alunos = file_get_contents("https://api/alunos?id=$codigoaluno"); $alunos = json_decode($alunos, true); $alunos = $alunos['data']; foreach ($alunos as $resulalunos){ echo $resulalunos['nome']; echo $resulalunos['foto']; echo $resulalunos['rua']; } }  
    • By Orico Chain
      Oi pessoal,
       
      Preciso de ajuda, estou tentando gerar um TXT com dados de uma API mas não estou conseguindo:
       
      <?php $curl = curl_init(); curl_setopt_array($curl, array( CURLOPT_URL => "https://api.bololex.com/api/prices/TRX-USDT", CURLOPT_RETURNTRANSFER => true, CURLOPT_TIMEOUT => 30, CURLOPT_HTTP_VERSION => CURL_HTTP_VERSION_1_1, CURLOPT_CUSTOMREQUEST => "GET", CURLOPT_HTTPHEADER => array( "cache-control: no-cache" ), )); $response = curl_exec($curl); $err = curl_error($curl); curl_close($curl); $response = json_decode($response, true); $value1 = $response['result'] [0] ['ask'] ['priceChange']; if (empty($value1)) { $value1 = is_file('/var/www/html/24tstar.txt') ? file_get_c> } else { $value1 = round($value1, 6); file_put_contents('/var/www/html/24tstar.txt', $value1); Preciso que o TXT grave duas informações: ASK e PRICECHANGE uma em baixo da outra
       
      estou errando alguem lugar, alguém poderia me ajudar?
    • By Ferdz-Agencia-Digital
      Estou importando o NavLink do react-router-dom e montando o meu menu assim:
       
      <Nav navbar>{createLinks(routes)}</Nav>  
      No arquivo routes.js estou montando enviando conforme código abaixo:
       
      var routes = [ { path: "/index", name: "Dashboard", icon: "ni ni-tv-2 text-primary", component: Index, tipo: 1, layout: "/admin", }, { path: "/solicitacoes-trabalho", name: "Solicitações", icon: "ni ni-cart text-orange", tipo: 1, component: Solicitacoes, layout: "/admin", }, { path: "/Clientes", name: "Clientes", icon: "ni ni-single-02 text-orange", tipo: 2, component: Clientes, layout: "/admin", }, ]; export default routes;  
      Há como na exibição eu conseguir filtrar pelo tipo e só mostrar o que for do tipo 1 ?
    • By Kelven
      Bom dia pessoal tudo bem?
      Então, estou trabalhando em um site em php e preciso usar a api do facebook para obter o feed do instagram, porém a chave token é um conteúdo muito sensível, então decidi fazer em php para ela não ficar disponível do lado do cliente. Alguém sabe me dizer se é possível fazer isso? Porque eu pesquisando no google só achei maneiras de fazer em javascript.
    • By Sapinn
      Opa galera, tudo blz? Recentemente comecei a estudar reactjs e para praticar estou fazendo o clone da Netiflix. Mas estou com um erro ao tentar chamar as imagens da API do TMDB o erro é: 
      TypeError: Cannot read properties of undefined (reading 'results')
       
      Já tentei refazer o código varias vezes mas não consegui resolver o problema. Vou postar o resto do código aqui
       
      App.js:
      import React, {useEffect, useState} from 'react'; import Tmdb from './Tmdb'; import MovieRow from './components/MovieRow'; const App = () =>{   const [movieList, setMovieList] = useState([]);   useEffect(()=>{     const loaddAll = async () =>{       let list = await Tmdb.getHomeList();       setMovieList(list)     }     loaddAll();   }, []);   return(       <div className="page">           <section className="lists">               {movieList.map((item, key)=>(                     <MovieRow key={key} title={item.title} items={item.items}/>               ))}                         </section>       </div>   ); } export default App; Consumir a api:
      Tmdb.js:
      const API_KEY = '******************************'; const API_BASE = 'https://api.themoviedb.org/3'; const basicFetch = async (endpoint) =>{     const req = await fetch(`${API_BASE}${endpoint}`)     const json = await req.json();     return json; } export default {     getHomeList: async () =>{         return [             {                 slug: 'originals',                 title: 'Originais da Netflix',                 items: await basicFetch(`/discover/tv?with_networks=213&language=pt-BR&api_key=${API_KEY}`)             },             {                 slug: 'trending',                 title: 'Recomendados para você',                 item: await basicFetch(`/trending/all/week?language=pt-BR&api_key=${API_KEY}`)             },             {                 slug: 'toprated',                 title: 'Em alta',                 item: await basicFetch(`/movie/top_rated?language=pt-BR&api_key=${API_KEY}`)             },             {                 slug: 'action',                 title: 'Ação',                 item: await basicFetch(`/discover/movie?width_genres=28&language-pt-BR&api_key=${API_KEY}`)             },             {                 slug: 'comedy',                 title: 'Comédia',                 item: await basicFetch(`/discover/movie?width_genres=35&language-pt-BR&api_key=${API_KEY}`)             },             {                 slug: 'horror',                 title: 'Terror',                 item: await basicFetch(`/discover/movie?width_genres=27&language-pt-BR&api_key=${API_KEY}`)             },             {                 slug: 'romance',                 title: 'Romance',                 item: await basicFetch(`/discover/movie?width_genres=10749&language-pt-BR&api_key=${API_KEY}`)             },             {                 slug: 'documentary',                 title: 'Documentários',                 item: await basicFetch(`/discover/movie?width_genres=99&language-pt-BR&api_key=${API_KEY}`)             },                     ]     } }  
       
      Componente para mostrar os filmes:
      MovieRow.js:
      import React from "react"; import './MovieRow.css'; export default ({title, items}) =>{         return (         <div>             <h2>{title}</h2>             <div className="moviewRow--listarea">                 {items.results.length > 0 && items.results.map((key, item)=>(                     <img src={`https://image.tmdb.org/t/p/w300${item.poster_path}`} />                 ))}             </div>         </div>     ); }  
      Se alguém pudesse me ajudar eu ficaria muito grato.
×

Important Information

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