2

Tenho uma API que emite um token JWT com uma validade máxima de 2h por token, após isso ele não é mais processado pela minha aplicação. Preciso que toda vez que este token esteja expirado, seja gerado um novo.

Porém, como implementar uma função para refresh de token JWT em algum contexto de autenticação?

Consegui algo parecido usando "useEffect" no meu contexto de autenticação, mas só é gerado um novo token depois que toda a aplicação é reiniciada. Gostaria que a função seja verificada sempre ao mudar de rota (react-router-dom v6).

Deixo abaixo todo o meu contexto, e também o repositório em que todo o código está hospedado.

import React, { createContext, useState, useEffect, useContext } from 'react';
import ContextDevTool from 'react-context-devtool';
import decode from 'jwt-decode';
import api from '../services/api';

import Loading from '../pages/Loading';

const AuthContext = createContext();

export function AuthProvider({ children }) {
  const [authenticated, setAuthenticated] = useState(false);
  const [token, setToken] = useState('');
  const [expiredToken, setExpiredToken] = useState(false);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    async function loadStorage() {
      const storagedToken = localStorage.getItem('token');

      if (storagedToken) {
        const decodedToken = decode(storagedToken);

        await new Promise((resolve) => setTimeout(resolve, 2000));

        // if token expiry date is lower than actual date
        if (decodedToken.exp <= Math.floor(new Date() / 1000)) setExpiredToken(true);

        setAuthenticated(true);
        setToken(decodedToken);
        api.defaults.headers['Authorization'] = `Bearer ${storagedToken}`;
      }

      setLoading(false);
    }

    loadStorage();
  }, []);

  async function Login(username, password) {
    const { data } = await api.get(`login?usuario=${username}&senha=${password}`);
    const decodedToken = decode(data.token);

    setAuthenticated(true);
    setToken(decodedToken);
    api.defaults.headers['Authorization'] = `Bearer ${data.token}`;
    localStorage.setItem('token', data.token);
  }

  async function refreshToken() {
    console.log('token refreshed');
  }

  async function Logout() {
    localStorage.clear();
    setAuthenticated(false);
    setToken('');
  }

  while (loading) return <Loading />;

  if (expiredToken) {
    refreshToken();
    setExpiredToken(false);
  }

  return (
    <AuthContext.Provider value={{ authenticated, token, expiredToken, Login, Logout }}>
      <ContextDevTool context={AuthContext} id="auth" displayName="Authentication Context" />
      {children}
    </AuthContext.Provider>
  );
}

export function useAuth() {
  const context = useContext(AuthContext);

  return context;
}

https://github.com/medeiroshudson/React-Context

Desde já, agradeço.

1 Resposta 1

2

Olá sugiro fazer uma PrivateRoute, assim a cada rota chamada no routes passaria por essa PrivateRoute e la dentro tu chamaria um metodo para renovar o token.

import { Route, Redirect } from "react-router-dom";

import RenovaToken from "./RenovaToken.js";
import Loading from "./Loading";

const PrivateRoute = ({ children, ...rest }) => {
 return (
     <Route
         {...rest}
         render={({ location }) => {
             return RenovaToken() ? (
                 children
             ) : (
                 <Redirect
                     to={{
                         pathname: "/login",
                         state: { from: location },
                     }}
                 />
             );
         }}
     />
 );
};
export default PrivateRoute;

E no RenovaToken tu cria a função que retorna se foi atualizado ou não.

No arquivo que você chama as rotas você importa essa PrivateRoute e chama as rotas assim

<PrivateRoute exact path="/home">
    </Home>
</PrivateRoute>
2
  • 1
    Deixa eu ver se entendi... Essa função vai redirecionar o usuário para o login caso o token esteja expirado? Commented 25/05/2020 às 19:44
  • @HudsonMedeiros depende da função que você criou que renova o token, se existe algum motivo pelo qual o token não pode ser renovado, você redireciona para alguma pagina de erro, ai é só trocar o /login por um componente. Se não existe nenhum motivo só tirar do if e chamar a função direto e depois o children Commented 25/05/2020 às 19:49

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .