Configurare Axios

Axios

1. Instalarea Axios

Pentru a putea efectua cereri HTTP în aplicația React, trebuie să instalăm librăria Axios:

npm install axios

2. Crearea unui fișiser de environment pentru SPA

Pentru a nu hardcoda URL-ul API-ului în cod și pentru a permite schimbarea rapidă între medii (development, production), este recomandat să folosim un fișier de mediu (.env).

În rădăcina proiectului React (acolo unde se află package.json), creăm un fișier numit .env.

În fișierul .env, adăugăm variabila pentru URL-ul API:

În fișierul .env, adăugăm variabila pentru URL-ul API:

VITE_API_URL=http://localhost:3000

💡 Observații:

• În Vite, toate variabilele de mediu care trebuie accesibile în codul client trebuie să înceapă cu prefixul VITE_.

• Nu trebuie să includeți ghilimele în jurul URL-ului.

3. Configurarea Axios pentru cereri autentificate (axiosAuth.js)

Fișierul axiosAuth.js creează o instanță Axios care include token-ul JWT la fiecare request și gestionează automat erorile 401:

// client/src/axios/axiosAuth.js
import axios from 'axios'

const API_URL = import.meta.env.VITE_API_URL;

const handleResponseError = (error) => {
  if (error.response?.status === 401) {
    // Token invalid sau expirat
    localStorage.removeItem('token')
    window.location.href = '/login'
  }
  return Promise.reject(error)
}

export const axiosAuth = axios.create({
  baseURL: API_URL,
})

axiosAuth.interceptors.request.use(
  (config) => {
    const token = localStorage.getItem('token')
    if (token) {
      config.headers.Authorization = `Bearer ${token}`
    }
    return config
  },
  (error) => {
    return Promise.reject(error)
  }
)

axiosAuth.interceptors.response.use(
  (response) => response,
  handleResponseError
)

export default axiosAuth

4. Configurarea Axios pentru cereri publice (axiosNoAuth.js)

Fișierul axiosNoAuth.js creează o instanță Axios fără token, dar gestionează totuși erorile globale 401:

// client/src/axios/axiosNoAuth.js
import axios from 'axios'

const API_URL = import.meta.env.VITE_API_URL;

const handleResponseError = (error) => {
  if (error.response?.status === 401) {
    // Token invalid sau expirat
    localStorage.removeItem('token')
    window.location.href = '/login'
  }
  return Promise.reject(error)
}

export const axiosNoAuth = axios.create({
  baseURL: API_URL,
})

axiosNoAuth.interceptors.response.use(
  (response) => response,
  handleResponseError
)

export default axiosNoAuth

Aspecte tehnice cheie

1. Instanțe separate (axiosAuth vs axiosNoAuth) – separă cererile care necesită autentificare de cele publice.

2. Interceptors request (axiosAuth) – adaugă automat token-ul JWT la fiecare cerere.

3. Interceptors response – gestionează erorile globale, redirecționând automat utilizatorul la /login dacă token-ul este invalid sau expirat.

4. Environment variable (VITE_API_URL) – permite schimbarea rapidă a URL-ului API între medii (development, production).