Solucionado (ver solução)
Solucionado
(ver solução)
4
respostas

Dando erro ao usar token na requisição

Me deparei com um erro que não estou conseguindo resolver. Após utilizar o token, está dando erro na propriedade map. Segue meu código:

/* Login.js */

efetuaLogin(event){
        event.preventDefault();
        const dados = {
            method:'POST',
            body:JSON.stringify({
                login:this.login.value,
                senha:this.senha.value
            }),
            headers: new Headers({
                'Content-type':'application/json'
            })
        }

        fetch('https://instalura-api.herokuapp.com/api/public/login', dados)
        .then(res =>{
            if(res.ok){
                return res.text()
            }else{
                throw new Error('Não foi possível fazer o login, tente novamente.') 
            }
        })
        .then(token => {
            localStorage.setItem('auth-token', token)
            this.props.history.push('/timeline')
        })
        .catch(erro => {
            this.setState({msg:erro.message})
        })
    }

/* TimeLine.js */

componentDidMount(){
        fetch(`https://instalura-api.herokuapp.com/api/public/fotos?X-AUTH-TOKEN=${localStorage.getItem('auth-token')}`)
        .then(res => {
            res = res.json()})
        .then(foto => {
            this.setState({
                fotos:foto
            })
        })
    }
 render(){
        return(
            <div className="foto container">
                {
                    this.state.fotos.map(foto => {
                        return(
                            <FotoItem foto={ foto } key={ foto.id }/>
                        );
                    })
                }
            </div>
        );
    }

Obs: estou usando a versão 4 do react-router (react-router-dom), e como observado acima estou usando a API do herokuapp

Alguém aí já teve o mesmo problema que possa me ajudar?

4 respostas

Fala aí Jacks, tudo bem? Faz um console.log do que a API te retornou e verifica se realmente é um array:

componentDidMount(){
    fetch(`https://instalura-api.herokuapp.com/api/public/fotos?X-AUTH-TOKEN=${localStorage.getItem('auth-token')}`)
        .then(res => {
            res = res.json()})
        .then(foto => {
            console.log(foto)
            this.setState({
                fotos:foto
            })
        })
}

Talvez o que você pode tentar fazer é modificar seu fetch para algo do tipo:

componentDidMount(){
    fetch(`https://instalura-api.herokuapp.com/api/public/fotos?X-AUTH-TOKEN=${localStorage.getItem('auth-token')}`)
        .then(res => res.json())
        .then(fotos => this.setState({ fotos }))
}

Espero ter ajudado.

Fala Matheus, baum cara e vc?

Fiz varios consoles no arquivo login.js fiz um no primeiro then da requisição, deu status 200 (tudo certo), e outro no segundo then, no token e me retornou o token. Entao acredito que não seja aí o problema.

No console do arquivo timeline.js fiz no didmount antes da requisição verificando o token e esta chegando, porém no primeiro then depois da requisição o status é 404, não sei se esse caminho está certo ou se o problema é nesse X-AUTH-TOKEN.

Obs: Mesmo tendo mudando o fetch como vc sugeriu não resolveu.

solução!

Achei o erro, o erro estava no caminho. Eu estava colocando api/public/fotos?... Sendo que o correto é api/fotos?...

:(

Valeu pela ajuda.

Boa Jacks, também nem reparei nisso, falha minha.

Fico feliz que tenha resolvido \o/

Abraços