Comment utiliser des variables d'environnement pour implémenter des fonctions dans les projets React ?

Question

J'essaie de sauvegarder ma clé API en tant que variable d'environnement mais je ne sais pas comment y accéder... J'ai installé dotenv en utilisant npm, créé le fichier dans le répertoire racine et y ai mis la clé. J'ai essayé d'y accéder dans le fichier js en utilisant process.env.API_KEY mais cela montre que la variable n'est pas définie.

J'ai essayé de mettre require('dotenv').config() en haut du fichier là où j'ai besoin de la clé, mais cela me donne une erreur...

ERROR in ./node_modules/dotenv/lib/main.js 2:13-28
Module not found: Error: Can't resolve 'path' in ...

Je pense que je l'ai peut-être mis dans le mauvais fichier ou qu'il me manque quelque chose

Answer 1

En résumé :

Pour lire la variable API_KEY dans votre couche React, vous devez exporter la variable REACT_APP_API_KEY avant de construire, puis dans n'importe quelle partie React, vous pouvez obtenir la valeur via :

process.env.REACT_APP_API_KEY

Voir le lien pour voir pourquoi le préfixe REACT_APP_ est nécessaire.

De plus, si votre token est un token à longue durée de vie ou non expirable, il ne doit pas être exposé au frontend (React). Seuls les jetons expirables (Code d'authentification oauth2 autorisation ) doivent être exposés à la couche frontend.

Consultez les ressources pour apprendre à gérer les variables frontales

Références

• Comment détecter la méthode d'environnement dans laquelle le fichier utilitaire JS (CRA) est exécuté
• Est-il possible d'utiliser les variables d'environnement du serveur React pour l'interface client ?
• Comment utiliser la clé Env pour obtenir avec Axios
• Dans un environnement de production, faites communiquer React avec le serveur API backend sur différentes instances EC2
• Comment utiliser la substitution de variables dans une application frontend JS tout comme une application backend ?