Intercepteur Axios React JS

Dans cet article, nous verrons comment créer un client API sécurisé et efficace à l'aide d'Axios dans React. Nous couvrirons la configuration d'Axios avec les intercepteurs, la configuration de la gestion des erreurs et les méthodes CRUD à l'aide de la classe APIClient. Décrivons le fonctionnement de ce script et les fonctionnalités qu'il fournit.

1. Configuration de base d'Axios

import axios from "axios";
import secureLocalStorage from "react-secure-storage";

axios.defaults.baseURL = "";
axios.defaults.headers.post["Content-Type"] = "application/json";

Cette configuration initiale d'Axios définit la baseURL et définit le Content-Type pour toutes les requêtes POST. En configurant une baseURL, Axios ajoute automatiquement cette URL de base à chaque requête, ce qui facilite le travail avec les points de terminaison dans les appels d'API.

2. Utilisation d'intercepteurs pour la réponse et la gestion des erreurs

Les intercepteurs sont des outils puissants qui nous permettent de gérer les réponses et les erreurs de manière globale.

Gestion des réponses

axios.interceptors.response.use(
    function (response) {
        return response.data ? response.data : response;
    },
    // ...

## Handling Errors

);

Cet intercepteur de réponse vérifie s'il y a des données dans la réponse. S'il existe, il renvoie simplement les données. De cette façon, nous obtenons uniquement les données pertinentes dont nous avons besoin dans nos composants sans accéder à plusieurs reprises à réponse.data.

Gestion des erreurs

function (error) {
    if (error?.response?.status === 401 && error?.response?.data?.data === 'Token is not valid'){
        secureLocalStorage.clear()
        window.location.href = '/'
    } else {
        let message;
        switch (error?.response?.status) {
            case 500:
                message = error?.response;
                break;
            case 401:
                message = error?.response;
                break;
            case 404:
            case 400:
            case 409:
                message = error?.response?.data;
                break;
            default:
                message = error.message || error;
        }
        return Promise.reject(message);
    }
}

Dans cette section, si l'état de la réponse est 401 et que le jeton n'est pas valide, l'application efface le jeton du stockage local sécurisé et redirige l'utilisateur vers la page de connexion. Cela garantit que les utilisateurs sont automatiquement déconnectés si leur session d'authentification expire. Pour les autres codes d'état, il capture l'erreur et renvoie un message approprié en fonction du type d'erreur.

3. Fonction setAuthorization

const setAuthorization = (token) => {
    axios.defaults.headers.common["token"] = token;
};

Cette fonction permet à l'application d'ajouter dynamiquement un jeton d'authentification à chaque demande. En appelant setAuthorization(token) après la connexion, le jeton sera automatiquement ajouté aux en-têtes de requête.

4. Création d'une classe APIClient pour les méthodes CRUD
La classe APIClient fournit des méthodes standard pour les requêtes HTTP, notamment get, create, update, put et delete.

obtenir la méthode
Cette méthode est flexible et gère les paramètres au format objet ou chaîne.

get = (url, params) => {
    let response;
    let paramKeys = [];

    if (params && typeof (params) === 'object') {
        Object.keys(params).map(key => {
            if (key === 'pagination') {
                paramKeys.push("pageIndex=" + String(params[key]?.pageIndex || 1));
                paramKeys.push("pageSize=" + String(params[key]?.pageSize || 10));
            } else {
                paramKeys.push(key + '=' + params[key]);
            }
        });
        const queryString = paramKeys.length ? paramKeys.join('&') : "";
        response = axios.get(`${url}?${queryString}`, params);
    } else if (typeof (params) === 'string') {
        response = axios.get(`${url}/${params}`);
    } else {
        response = axios.get(url, params);
    }

    return response;
};

Cette méthode formate automatiquement les chaînes de requête, ce qui facilite la création de requêtes GET avec des paramètres complexes tels que la pagination, le filtre ou le tri.

créer, mettre à jour, mettre et supprimer des méthodes
Ces méthodes utilisent les fonctions intégrées de publication, de patch, de mise et de suppression d'Axios pour interagir avec l'API.

create = (url, data) => {
    return axios.post(url, data);
};

update = (url, data) => {
    return axios.patch(url, data);
};

put = (url, data) => {
    return axios.put(url, data);
};

delete = (url, config) => {
    return axios.delete(url, { ...config });
};

Cette classe résume les appels d'API, rendant le code des composants plus propre et plus structuré, réduisant ainsi la redondance.

Exemple d'utilisation du client API

import { API_URL, API_VERSION } from "#/Common/constants/env";
import { APIClient } from "#/helpers/api_helper";

export const POST_LOGIN = API_URL + API_VERSION +  "/auth/login";

const api = new APIClient();
export const Login = (data: any) => api.create(POST_LOGIN, data);

Pour le script complet, vous pouvez voir l'essentiel suivant
Intercepteur Axios

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!