我的代码在多个位置使用带有密钥的 API。 如何在不上传密钥的情况下将代码上传到 GitHub？

Question

The project is a Vue SPA and a couple of my components have to make GET requests to an API with a secret key. I currently want to upload the project to GitHub pages, however, I don't want to upload the key.

I've read that I need to create a file that should contain a variable with my key and then just use that variable in the place of the secret key, however, I am not sure how to go about doing this.

Answer 1

If you use the key client-side then you expose it to every user of the application.

Putting it in a variable just means it only appears in one place in the source code. It is still visible there and in every request sent to the API (where it can easily be found with the Network tab in the browser's developer tools).

To keep it secret you need to write server-side code to access the API, and then expose the data to your Vue app through some other mechanism (typically a web service of your own).

Answer 2

您可以使用不属于源代码的环境文件，并通过dotenv包或类似程序将其加载到前端代码中

Answer 3

If you cannot rely on a server to store it as suggested above, you can store it in an ENV variable template.

auth.ENV.dist

NODE_ENV=''
PORT=''
# Set your database/API connection information here
API_KEY=''
API_URL=''

Notice: this is a common practice to set a auth key in a .ENV file and is far more common that retrieving it from a server for a variety of reason. IE least but not last reason: for retrieving in a safe way those parameters you have to store another auth token or rely on other parameters (IP or similar) related to the deploy environment.

There are tons of articles covering the topic, just look where and how .ENV files are used.

This also allows to split behavior of your auth in (IE) test, staging and production environment.

EDIT:

This article is very complete and take in account a lot of scenarios with advantages and drawbacks, it also exposes the architecture of a serverside management of keys.