Ir para conteúdo

POWERED BY:

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

Compartilhar este post


Link para o post
Compartilhar em outros sites

Crie uma conta ou entre para comentar

Você precisar ser um membro para fazer um comentário

Criar uma conta

Crie uma nova conta em nossa comunidade. É fácil!

Crie uma nova conta

Entrar

Já tem uma conta? Faça o login.

Entrar Agora

  • Conteúdo Similar

    • Por 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']; } }  
    • Por 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?
    • Por 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 ?
    • Por 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.
    • Por 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.
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.