Middleware and Its Implementation in Front-end Development

Middleware is a common term in backend development.  In server-side programming, middleware is useful for manipulating requests/responses in the processing pipeline. There are various types of middleware. Some common examples for the backend areas (express js)

1. Application-level middleware (app.use())
2. Router-level middleware (router.use())
3. Error-handling middleware (err, req, res ,next)
4. Built-in middleware (express.json, express.static)
5. Third-party middleware (body-parser, morgan)

When we work on the backend, we focus on data processing, business logic, and resource management tasks. But, we focus on frontend, UI building, and user interaction where users interact with the client side. In a frontend ecosystem, middleware also plays an essential role in state management, API handling, Routing, and data flow control.

Middleware in frontend development is typically used to:

• Process and transform API requests/responses.
• Log and debug application state changes.
• Enforce business logic and security rules.
• Integrate with third-party services like analytics or error tracking.

In applications using Redux for state management, middleware intercepts actions dispatched to the Redux store. It allows developers to add logic (like logging, async operations, or conditional logic) before actions reach the reducer.

Example: Logging Middleware in Redux

const loggerMiddleware = (store) => (next) => (action) => {
  console.log('Dispatching:', action);
  const result = next(action);
  console.log('Next State:', store.getState());
  return result;
};

// Apply middleware to Redux
import { createStore, applyMiddleware } from 'redux';
import rootReducer from './reducers';

const store = createStore(rootReducer, applyMiddleware(loggerMiddleware));

In frameworks like Next.js, middleware can process API requests before they are sent to the server or after receiving the response. This allows for tasks like authentication, data transformation, and caching.

Example: Axios Middleware (Interceptors)

Using Axios interceptors, you can add middleware-like behavior for API calls.

import axios from 'axios';

// Create an Axios instance
const api = axios.create({
  baseURL: 'https://api.example.com',
});

// Request interceptor
api.interceptors.request.use((config) => {
  // Add authorization token to headers
  const token = localStorage.getItem('authToken');
  if (token) config.headers.Authorization = `Bearer ${token}`;
  return config;
});

// Response interceptor
api.interceptors.response.use(
  (response) => response, // Process successful response
  (error) => {
    if (error.response.status === 401) {
      // Handle unauthorized access
      window.location.href = '/login';
    }
    return Promise.reject(error);
  }
);

export default api;

Middleware can be used to control access to routes based on conditions like authentication or roles.

Example: React Router Middleware-Like Logic

import { Navigate } from 'react-router-dom';

const AuthMiddleware = ({ children }) => {
  const isAuthenticated = localStorage.getItem('authToken');
  return isAuthenticated ? children : <Navigate to="/login" />;
};

// Usage in Routes
import { Route } from 'react-router-dom';

<Route path="/dashboard" element={<AuthMiddleware><Dashboard /></AuthMiddleware>} />

Middleware logic can also be applied at the component level to control rendering, enhance data processing, or manage lifecycle events.

Example: HOC (Higher-Order Component) as Middleware

const withAuth = (Component) => (props) => {
  const token = localStorage.getItem('authToken');
  if (!token) {
    window.location.href = '/login';
    return null;
  }
  return <Component {...props} />;
};

// Usage
const Dashboard = () => <h1>Dashboard</h1>;
export default withAuth(Dashboard);

• Modular Logic: Middleware provides a clean way to add logic without cluttering components.
• Scalability: Helps manage complex data flows and API interactions.
• Centralized Control: Enables consistent handling of authentication, error management, and caching.
• Extensibility: Easily integrate third-party libraries like analytics tools or logging services.