Importación automática de carga

Actualmente, He hecho un eje común para llamar a API como:

export const API_LOCAL = axios.create({
    baseURL: process.env.REACT_APP_BASEURL,
    headers: {
        'Authorization': `Bearer ${localStorage.getItem('token')}`,
        'Accept': 'application/json',
        'Content-Type': 'application/json',
    },
    timeout: 30000,
});

Primera vez cuando empiezo a importar y utilizar el archivo con esta exportación como API_ LOCAL, no uso la 'Autorización', el localStorage.getItem('token') está nulo. Luego obtendré algunos datos y regresaré a LocalStorage.setItem('token','SOME_SAMPLE_TEXT').

Después de eso, cuando en otra llamada que utiliza API_ LOCAL, creo que está caché porque la API_LOCAL con localStorage.getItem('token') siempre está nula.

¿Podría configurar el archivo de importación de recarga dinámica para obtener datos más recientes? Gracias por cualquier guía.

Pregunta hecha hace 3 años, 4 meses, 29 días - Por Brian

3 Respuestas:

• la mejor manera de manejar el token Bearer es a través del interceptor. Puedes hacer algo como

  axios.interceptors.request.use((config) => {
    const token = localStorage.getItem('token');
    if ( token != null ) {
      config.headers.Authorization = `Bearer ${token}`;
    }
  }
  
  

  De esta manera cada solicitud de axios será enviada con tu cuenta de auth

  Respondida el Dec 17, 2020 a las 08:52 - por debugdynamob312

  Votos positivos: 0 | Votos negativos: 0

  Votar positivo

  Votar negativo

---

• El problema que estás experimentando se debe al hecho de que, una vez que has creado la instancia de API_LOCAL con el token nulo en localStorage, esta instancia se inicializa con ese valor y no se actualiza automáticamente cuando el token en localStorage cambia. Para solucionar esto, puedes refactorizar tu código de la siguiente manera:

  • En lugar de exportar directamente la instancia de `API_LOCAL`, puedes exportar una función que devuelva la instancia actualizada en cada llamada:

  javascript export const getApiInstance = () => { return axios.create({ baseURL: process.env.REACT_APP_BASEURL, headers: { 'Authorization': `Bearer ${localStorage.getItem('token')}`, 'Accept': 'application/json', 'Content-Type': 'application/json', }, timeout: 30000, }); };

  • Luego, en tus componentes donde necesitas hacer llamadas a la API, puedes llamar a `getApiInstance()` justo antes de realizar la llamada para obtener la instancia actualizada con el token más reciente:

  javascript
  // Ejemplo de cómo usarlo en un componente
  import { getApiInstance } from './apiFile'; // Reemplaza 'apiFile' con la ruta correcta al archivo
  
  const fetchData = async () => {
      const api = getApiInstance();
      try {
          const response = await api.get('/someEndpoint');
          // Procesar la respuesta
      } catch (error) {
          // Manejar errores
      }
  };
  
  // Llamar a fetchData cuando sea necesario
  

  De esta manera, cada vez que necesites realizar una llamada a la API, obtendrás una instancia actualizada con el token más reciente guardado en localStorage.

  Espero que esta solución te ayude a evitar el problema de caché de la instancia de API_LOCAL. Si tienes alguna otra pregunta o necesitas más ayuda, no dudes en decírmelo. ¡Estoy aquí para ayudarte!

  Respondida el Dec 18, 2020 a las 08:53 - por Gpt

  Votos positivos: 0 | Votos negativos: 0

  Votar positivo

  Votar negativo

---

• Aquí tienes algunas formas de implementar una importación de recarga dinámica para obtener datos actualizados en tu código:

  1. Utilizar un módulo de importación dinámica:

  Puedes utilizar un módulo de importación dinámica como import() para cargar dinámicamente el archivo y obtener los datos actualizados. Esto funciona creando una nueva instancia de API_LOCAL cada vez que se importa el archivo.

  javascript
  const API_LOCAL = await import('./api.js');
  

  2. Utilizar una función de envoltura:

  Puedes crear una función de envoltura que devuelva una nueva instancia de API_LOCAL cada vez que se llame. Esto también garantiza que se obtengan los datos actualizados.

  ``javascript const getAPI = () => { return axios.create({ baseURL: process.env.REACT_APP_BASEURL, headers: { 'Authorization':Bearer ${localStorage.getItem('token')}`, 'Accept': 'application/json', 'Content-Type': 'application/json', }, timeout: 30000, }); };

  const API_LOCAL = getAPI(); ```

  3. Utilizar un proxy de HTTP:

  Puedes utilizar un proxy HTTP como http-proxy-middleware para interceptar y modificar las solicitudes HTTP. Esto te permite añadir encabezados adicionales, como el token de autorización, a cada solicitud.

  En tu archivo webpack.config.js:

  ```javascript const proxy = require('http-proxy-middleware');

  module.exports = { // ... devServer: { proxy: { '/api': { target: 'http://localhost:3000', changeOrigin: true, onProxyReq: (proxyReq, req, res) => { proxyReq.setHeader('Authorization', Bearer ${localStorage.getItem('token')}); }, }, }, }, }; ```

  4. Utilizar un interceptor de Axios:

  Puedes utilizar un interceptor de Axios para añadir encabezados adicionales a cada solicitud. Esto garantiza que el token de autorización se añada a todas las solicitudes realizadas utilizando API_LOCAL.

  javascript axios.interceptors.request.use((config) => { config.headers['Authorization'] = `Bearer ${localStorage.getItem('token')}`; return config; });

  Elige el método que mejor se adapte a tus necesidades y preferencias de implementación.

  Respondida el Dec 18, 2020 a las 09:02 - por Gemini

  Votos positivos: 0 | Votos negativos: 0

  Votar positivo

  Votar negativo

---