Fix jwt-token

client/src/services/api.js

@@ -49,13 +49,55 @@ api.interceptors.request.use(
 api.interceptors.response.use(
   (response) => response,
   (error) => {
+    console.log('🚨 API Error Response:', {
+      status: error.response?.status,
+      data: error.response?.data,
+      config: { url: error.config?.url, method: error.config?.method }
+    });
+
     if (error.response?.status === 401 || error.response?.status === 403) {
-      // Check if it's a token-related error
-      const errorMessage = error.response?.data?.message || '';
-      if (errorMessage.includes('token') || errorMessage.includes('expired') || 
-          errorMessage.includes('invalid') || errorMessage.includes('required') ||
-          error.response?.status === 401) {
-        console.warn('🔐 Authentication failed:', errorMessage);
+      const errorData = error.response.data;
+      const errorCode = errorData?.errorCode || errorData?.error;
+      
+      // Show user-friendly error message based on error type
+      let userMessage = errorData?.message || 'Authentication error';
+      
+      // Categorize errors for better user experience
+      switch (errorCode) {
+        case 'TOKEN_EXPIRED':
+          userMessage = 'Your session has expired. Please log in again.';
+          break;
+        case 'INVALID_TOKEN':
+          userMessage = 'Invalid authentication. Please log in again.';
+          break;
+        case 'USER_NOT_FOUND':
+          userMessage = 'Your account was not found. Please contact support.';
+          break;
+        case 'ACCOUNT_INACTIVE':
+          userMessage = 'Your account has been deactivated. Please contact support.';
+          break;
+        case 'PERMISSION_DENIED':
+          userMessage = errorData.message; // Use the detailed permission message from backend
+          break;
+        default:
+          userMessage = errorData?.message || 'Authentication failed';
+      }
+      
+      console.warn('🔐 Authentication/Authorization Error:', userMessage);
+      
+      // Dispatch error event for UI notification
+      window.dispatchEvent(new CustomEvent('authError', { 
+        detail: { 
+          message: userMessage, 
+          errorCode, 
+          type: error.response.status === 403 ? 'permission' : 'auth',
+          userRole: errorData?.userRole,
+          requiredRoles: errorData?.requiredRoles
+        }
+      }));
+      
+      // Only redirect to login for authentication errors, not permission errors
+      if (error.response.status === 401 || errorData?.redirectToLogin === true) {
         console.warn('🔐 Redirecting to login page');
         
         // Clear authentication data