Проблема с использованием переменных env - PullRequest
1 голос
/ 29 января 2020

Сделав эту простую процедуру, которая использует Github API для фильтрации пользователей и репозиториев, я недавно узнал, что информация, имеющая отношение к API, такая как ключи API, идентификаторы и т. Д. c. это плохая практика. В моем конкретном случае наличие client_ID и client_secret. Недавно я узнал о переменных среды и о том, как их можно использовать с пакетом dotenv, но я борюсь за то, как его использовать. Вот что я попробовал:

  1. Я попытался создать файл сервера. js, где я буду хранить переменные среды после помещения их в файл env. Я добился успеха в этом, но я не могу использовать их в github. js file

  2. Я пытался использовать требование dotenv прямо в моем * Файл 1011 * github. js, но появляется сообщение о том, что мой класс (Github) не определен.

  3. Я попытался импортировать и экспортировать переменные env из сервер . js для файла github. js, но мой класс Github недоступен.

Я что-то упустил или неправильно использую эти переменные среды?

Соответствующий код ниже

github. js

    class Github {
       constructor() {
           this.client_ID = "1037a4472aafe; // Trying to hide this
           this.client_secret = "aaad41dd6b1cf2331"; // Trying to hide this
           this.repos_count = 5;
           this.repos_sort = "created: asc";
       }

       async getUser(user) {
           const profileResponse = await fetch(`https://api.github.com/users/${user}?client_id=${this.client_ID}&client_secret=${this.client_secret}`);
           const repoResponse = await fetch(`https://api.github.com/users/${user}/repos?per_page=${this.repos_count}&sort=${this.repos_sort}&client_id=${this.client_ID}&client_secret=${this.client_secret}`);


           const profileData = await profileResponse.json();
           const repoData = await repoResponse.json();

           return {
               profileData: profileData,
               repoData: repoData
           }
       }
   }

приложение. js

// Instantiate GITHUB class
const github = new Github;
// Instantiate UI class;
const ui = new UI;

// Search input
const searchUser = document.getElementById("searchUser");

//search input event listner
searchUser.addEventListener("keyup", (e) => {
    // Get input text
    const userText = e.target.value;

    if (userText !== "") {
        // Make HTTP call
        github.getUser(userText)
        .then((data) => {
            if (data.profileData.message === "Not Found") {
                //show alert
                ui.showAlert("User not found", "alert alert-danger");
            }
            else {
                // Show the profile
                ui.showProfile(data.profileData);
                ui.showRepos(data.repoData);
                ui.logInfo(data.profileData);
            }
        });
    }
    else {
        // Clear the profile
        ui.clearProfile();
    }
});

.env

client_ID=1037a4472aafe
client_secret=aaad41dd6b1cf2331

сервер. js

const express = require("express");
const path = require("path");
const port = process.env.PORT || 8080;
const app = express();

require("dotenv").config();

const client_ID = process.env.client_ID;
const client_secret = process.env.client_secret;


app.use(express.json());
app.use(express.static(path.join(__dirname, "src")));
app.get("*", (request, response) => {
    response.sendFile(path.resolve(__dirname, "src/index.html"))
});

console.log(process.env)

app.listen(port, () => {
    console.log(`Server running on port ${port}`);
});

1 Ответ

0 голосов
/ 29 января 2020

Вы используете какой-то bundler? , если это так, вы должны начать искать, как использовать env переменные с bundler.

Пример: если вы используете webpack, вам нужно настроить переменные на webpack.config.

Этот пост связан с Ваша проблема, но с веб-пакетом

...