Cómo cerrar la sesión del usuario cuando el token caduca en la aplicación de reacción

Posteriormente a consultar con especialistas en la materia, programadores de varias ramas y profesores dimos con la solución al problema y la dejamos plasmada en esta publicación.

Solución:

El problema al que te enfrentas es simple. Su AuthReducer toma el estado inicial solo una vez cuando se crea. Ahora, cuando vuelve a cargar su aplicación, todo se inicializa nuevamente y su lógica se encarga de la caducidad. Sin embargo, en el cambio de ruta, no vuelve a evaluar su estado inicial.

Sin embargo, lo que puede hacer es mientras usa setContext puede verificar la validación de la caducidad decodificando el token usando jwtDecode y actualice el token si expiró y guárdelo en localStorage ya que esto se ejecuta en cada solicitud

const authLink = setContext(async () => 
  let token = localStorage.getItem('JWT_Token')
  const  exp  = jwtDecode(token)
  // Refresh the token a minute early to avoid latency issues
  const expirationTime = (exp * 1000) - 60000
  if (Date.now() >= expirationTime) 
    token = await refreshToken()
    // set LocalStorage here based on response;
  
  return 
    // you can set your headers directly here based on the new token/old token
    headers: 
      ...
    
  
)

Sin embargo, dado que desea redirigir a la página de inicio de sesión y no actualizar el token cuando el token caducó, puede utilizar el objeto de historial personalizado con Rutas

src/historia.js

import  createBrowserHistory  from 'history';
const history = createBrowserHistory()
export default history;

---

Aplicación.js

import history from '/path/to/history.js';
import  Router  from 'react-router-dom';


  
    

      
    
  

---

y luego en setContext podrías hacer

import history from '/path/to/history';
const authLink = setContext(async () => 
  let token = localStorage.getItem('JWT_Token')
  const  exp  = jwtDecode(token)
  const expirationTime = (exp * 1000) - 60000
  if (Date.now() >= expirationTime) 
    localStorage.clear();
    history.push('/login');
  
  return 
    // you can set your headers directly here based on the old token
    headers: 
      ...
    
  
)

Comentarios y puntuaciones

---

---

Utiliza Nuestro Buscador