Making Authenticated API Requests with JWT in JavaScript

async function fetchWithAuth(url, options = {}) {
  const token = localStorage.getItem('authToken'); // Or from a cookie/session storage
  if (!token) {
    throw new Error('No authentication token found.');
  }

  const headers = {
    'Content-Type': 'application/json',
    'Authorization': `Bearer ${token}`,
    ...options.headers,
  };

  try {
    const response = await fetch(url, { ...options, headers });
    if (!response.ok) {
      // Handle specific authentication errors, e.g., 401 Unauthorized
      if (response.status === 401) {
        console.error('Authentication failed. Please re-login.');
        // Optionally redirect to login page
        // window.location.href = '/login';
      }
      const errorData = await response.json().catch(() => ({ message: response.statusText }));
      throw new Error(`API error: ${response.status} ${errorData.message}`);
    }
    return await response.json();
  } catch (error) {
    console.error('Network or API request failed:', error);
    throw error;
  }
}

// Example Usage:
// Call this after a user logs in and you've stored the JWT.
// localStorage.setItem('authToken', 'YOUR_JWT_TOKEN_HERE');

// fetchWithAuth('/api/protected-data')
//   .then(data => console.log('Protected data:', data))
//   .catch(error => console.error('Failed to get protected data:', error));

// fetchWithAuth('/api/post-data', {
//   method: 'POST',
//   body: JSON.stringify({ item: 'new item' })
// })
//   .then(data => console.log('Posted data response:', data))
//   .catch(error => console.error('Failed to post data:', error));