Javascript Função de verificação de token não retorna true ou false

[Preciouz]

Estou tentando fazer uma função que controla o acesso a algumas rotas React da minha aplicação.

 

Essa função verifica se o usuário está logado ( verifica se ele possui um token), envia uma requisição para a API com o token, verifica se o token enviado é válido ou não, e retorna uma resposta.

 

• Se a resposta da minha função for true (token válido), o usuário poderá acessar a rota.

• Se a resposta da minha função for false(token inválido), o usuário é redirecionado para a página de login.

 

Segue abaixo o código da api (instância do axios):

 

import axios from 'axios';

const api = axios.create({
    baseURL: 'http://localhost:4000'
});

export default api; 

 

O código da função tokenVerify():

 

import api from "./api"

function tokenVerify(){
    
    const userToken = localStorage.getItem('usertoken')

    if(userToken !== undefined){

         api.post('/tokenverify', userToken
         
         ).then(res => {
            
            const statusRes = res.data.status
            
            if(statusRes === 200){
                return true
            }else{
                return false
            }
            

         }).catch(erro => {
             console.log(erro)
         })      
    }
}

export { tokenVerify }

 

O código da <PrivateRoute/> (rota privada do React):

 

import React from "react";
import { Route } from 'react-router'
import { tokenVerify } from '../services/tokenVerify'

const PrivateRoute = ({ component: Component, ...rest }) => (

    <Route { ...rest } render={ props => (

        tokenVerify() ? ( <Component { ...props }/> ) : ( window.location.replace('/') )

    )}/>
)
export default PrivateRoute

 

E o código da rota da API de verificação do token:

 

const express = require('express')
const router = express.Router()
const jwt = require('jsonwebtoken');

router.post("/tokenverify", (req, res) => {

    const JWTSecret = require('../app')
    
    var reqToken = req.body.usertoken
   
    if(reqToken != undefined){

        jwt.verify(reqToken, JWTSecret, (error, data) => {
           
            if(error){
                res.status(401)
                res.json('Token inválido')

            }else{
                res.status(200);
                res.json('Deu certo')
            }}
)}

})


module.exports = router;

 

A função tokenVerify() está sempre retornando undefined, e preciso que ela retorne true ou false. Estou tentando mas ainda não identifiquei o erro. Assisti alguns vídeos e li algumas postagens em fóruns mas ainda não consegui achar algo que me ajude.

 

Poderiam me ajudar?

[Rui Guilherme]

Tenta usar o sendStatus:

 

jwt.verify(reqToken, JWTSecret, (error, data) => {
  if (error) return res.sendStatus(401) // caso exista qualquer erro com o jwt retorna 401

  res.sendStatus(200)
)}

 

Talvez funcione, manda feedback se n funcionar.

[GabrielSennaMs]

@Preciouz

 

Bom tem dois problemas na sua aplicação o primeiro é que na sua função "tokenVerify" você não está retornando nenhum valor de resposta.

O segundo problema é que você não espera o retorno da request para validar a rota, já que o javascript vai fazer o processo ao mesmo tempo que valida a rota pro ser síncrono.

 

Adicione o token "async" em sua função tokenVerify, para que ele a já como uma função sincrona, e depois adicione o token await na request do axios para fazer a função esperar o retorno do valor.

import api from "./api";

async function tokenVerify()
{    
  let userToken = localStorage.getItem('usertoken');
  
  if(userToken !== undefined)
  {
    return await api.post('/tokenverify', userToken)
      .then(res => (res.data.status == 200) ? true : false)
      .catch(erro => console.error(erro));      
  }
  
  return false;
}

export default { tokenVerify }

 

A mesma coisa deve ser feita na sua criação de componente adicionando await e async.

[Rui Guilherme]

@GabrielSennaMs Só uma observação em relação ao uso de async/await junto do expressJS:

 

O ExpressJS 4.x não suporta async/await e pode gerar "UnhandledPromiseRejectionWarning" no código, sendo uma issue chata que aparece em produção, segue:
https://github.com/expressjs/express/issues/4360
https://github.com/expressjs/express/issues/4348

 

Vale lembrar que essas duas issues apesar de estarem fechadas, foram resolvidas apenas na versão 5.x do ExpressJS, e a versão 5 do expressJS está em fase beta tem uns 7 anos sendo a ultima versão lançada a 5.0.0-alpha.8 em 2020 já a versão 4 do ExpressJS é de 2019.

 

Eu recomendo a leitura desse artigo caso queira usar async/await junto do expressJS: https://zellwk.com/blog/async-await-express/