Скрытие ключа API в React

У нас есть приложение, использующее ключ API (Accesstoken). Мы хотели бы скрыть ключ API в файле .env.

Мы прошли следующие шаги.

  1. Создал файл .env в исходной папке (с .gitignore)

  2. Добавлен в .env REACT_APP_ACCESSTOKEN = pk.ffe1Ijo .......

  3. В терминал добавлен npm install dotenv

  4. Добавлен в наш файл map.component - импорт dotenv из dotenv dotenv.config () const accessToken = process.env.REACT_APP_ACCESSTOKEN;

  5. Добавлен в webpack.config.js -

    внешние: [fs], разрешите: {extension: ['.js', '.jsx', '.ts', '.tsx']},

Теперь мы получаем сообщение об ошибке в консоли веб-браузера, что fs не определено. Или что Acesstoken не найден.


react-native reactjs npm javascript npm-scripts
person Kalvin    schedule 26.01.2021    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Согласно документации create-response-app, если вы создаете игрушечные приложения, не рекомендуется хранить секретные ключи в приложении React.

Но, если вам действительно нужно:

Если вы используете приложение create-response-app, нет необходимости устанавливать отдельную библиотеку dotenv, поскольку она поддерживается из коробки.

В противном случае вы, вероятно, можете попробовать dotenv-webpack. См. Другой вопрос SO.

person Nicky Logan    schedule 26.01.2021
comment
Спасибо, мы выполнили команду npm i dotenv-webpack, а затем внесли поправки в webpack.config.js (как показано по ссылке), и это сработало. - person Kalvin; 27.01.2021