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, 5 meses, 5 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

  • 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

  • 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