Axios: il postino che intercetta

Ciao, quando creo un nuovo progetto con Vue la prima cosa che installo è sempre Axios.
Orami lo faccio di riflesso come quando la mattina mi trascino verso la macchinetta del caffè.

Axios è una libreria che permette di chiamare le nostre API con JS offrendoci molti vantaggi.

Con Vue ad esempio, grazie al composable possiamo creare un file myapi.js è settare i parametri principali per il nostro postino.

import axios from 'axios'
const api = axios.create({
  baseURL: 'http://localhost:8000/',
  withCredentials: true,
  withXSRFToken: true,
  headers: {
    Accept: 'application/json',
  },
})
export default api

withCredentials messo qui ci permette di ricevere il cookie della risposta e di rimbalzarlo al nostro back end ad ogni chiamata.

Fatto questo torna particolarmente utile usare interceptors: un metodo per centralizzare il nostro codice e dichiarare delle logiche in specifiche situazioni di risposta delle chiamate API.

Un caso pratico potrebbe essere la gestione l'autenticazione delle SPA tramite cookie come offre Sanctum di Laravel. Il "santuario" imposta un rotta api, protetta dal middleware(auth:sanctum) per verificare se l'utente ha effettuato l'accesso.

Se utilizziamo l'autorizzazione tramite cookie e rispettiamo la regola che backend e frontend devono essere sullo stesso dominio, possiamo inviare il cookie rilasciato da Laravel rilasciato subito dopo il login alle prossime chiamate, per verificare se l'uente è regolarmente loggato.

Qui torna utile intercettare le risposte di Laravel centralizzando la logica.

Possiamo includere questa parte dopo aver dichiarato axios.create()

api.interceptors.response.use(
  (response) => response,

  (error) => {
    if (error.response && error.response.status === 401) {
      console.error('Sessione scaduta.')

      const store = authStore()
      store.User.data = null

      if (router.currentRoute.value.name !== 'login') {
        router.push({ name: 'login' })
      }
      return Promise.reject(error)
    }
    //per altri errori
    return Promise.reject(error)
  },
)

Semplice concetto: SE la risposta della mia API è 401 (non autenticato) svuoto lo store con i dati dall'utente e verifico in quale rotta sono, SE mi trovo fuori da login allora rimando l'utente alla pagina login.

Ovviamente se usti router e store bisogna importarli insieme ad Axios.
Grazie per aver letto questo articoletto, a presto.