Saltar al contenido

¿Cómo actualizar los tokens JWT en la aplicación React.js?

Necesitamos tu ayuda para extender nuestras secciones en referencia a las ciencias de la computación.

Solución:

Si está utilizando Axios (que recomiendo encarecidamente), puede declarar los comportamientos de actualización de su token en los interceptores de la respuesta. Esto se aplicará a todos solicitudes https hecho por Axios.

El proceso es algo asi

  1. Comprobando si el estado de error es 401
    • Si hay un token de actualización válido: utilícelo para obtener el token de acceso
    • si no hay un token de actualización válido: cierre la sesión del usuario y regrese
  2. Vuelva a realizar la solicitud con el nuevo token.

Aquí hay un ejemplo:

axios.interceptors.response.use(
  (response) => 
    return response
  ,
  (error) => 
    return new Promise((resolve) => 
      const originalRequest = error.config
      const refreshToken = localStorage.get('refresh_token')
      if (error.response && error.response.status === 401 && error.config && !error.config.__isRetryRequest && refreshToken) 
        originalRequest._retry = true

        const response = fetch(api.refreshToken, 
          method: 'POST',
          headers: 
            'Content-Type': 'application/json',
          ,
          body: JSON.stringify(
            refresh: refreshToken,
          ),
        )
          .then((res) => res.json())
          .then((res) => 
            localStorage.set(res.access, 'token')

            return axios(originalRequest)
          )
        resolve(response)
      

      return Promise.reject(error)
    )
  ,
)

Sección de Reseñas y Valoraciones

¡Haz clic para puntuar esta entrada!
(Votos: 0 Promedio: 0)



Utiliza Nuestro Buscador

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *