🌐 HTTP Clients and Interceptors

Centralized network management, JWT token injection, and session handling.

Given that the HUB is the central point connecting to multiple independent backends (Transactional Engine, Report Generator, ETL Pipeline, Identity Access Management System (IAM)), the network architecture requires strict control over outgoing requests.

To achieve this, the frontend utilizes isolated Axios instances for each microservice, centralized in the lib/ folder.

🛡️ Security Interceptors (IAM)

Communication with the Identity Access Management (IAM) microservice and protected routes require constant credential validation. Instead of manually attaching the token to every request, the iamApi.js instance utilizes network interceptors (interceptors.request).

Before any request leaves the browser, the interceptor automatically injects the JWT token (if it exists) and configures the Accept-Language header based on the user’s current route to support language switching in server responses.

// Dynamic injection in lib/iamApi.js
iamApi.interceptors.request.use((config) => {
    const token = localStorage.getItem('jwt_token');
    if (token) {
        config.headers.Authorization = `Bearer ${token}`;
    }

    const isEnglish = window.location.pathname.startsWith('/en');
    config.headers['Accept-Language'] = isEnglish ? 'en' : 'es';

    return config;
});

⏱️ Expired Session Handling (401 Unauthorized)

To prevent a user from remaining in a private view if their JWT token has expired or is invalid, the Axios instance implements a response interceptor (interceptors.response).

If the server responds with an HTTP 401 status code, the interceptor automatically clears the credentials from local storage (localStorage) and securely redirects the user to the corresponding login screen, respecting the current session language.

// Global expiration handling in lib/iamApi.js
iamApi.interceptors.response.use(
    (response) => response,
    (error) => {
        if (error.response && error.response.status === 401) {
            localStorage.removeItem('jwt_token');
            localStorage.removeItem('user');
            
            const isEnglish = window.location.pathname.startsWith('/en');
            const loginUrl = isEnglish ? '/en/iam' : '/iam';
            
            if (window.location.pathname !== loginUrl) {
                window.location.replace(loginUrl);
            }
        }
        return Promise.reject(error);
    }
);

🔌 Decoupled Network Instances

To keep network domains completely isolated and avoid side effects between microservices, the HUB declares independent Axios clients with their own base URLs and timeout settings tailored to the nature of each process.

// Network configuration for the ETL pipeline in lib/logiflowApi.js
const logiflowApi = axios.create({
    baseURL: import.meta.env.PROD 
        ? '[https://logiflow-api-fx7o.onrender.com/api/v1/etl](https://logiflow-api-fx7o.onrender.com/api/v1/etl)'
        : 'http://localhost:8081/api/v1/etl',
    headers: {
        'Content-Type': 'application/json'
    }
});