让 process.env 与 HERE API 键一起工作

Question

我正在构建一个 React 地理待办事项列表，类似于 this one。我正在使用 Mapbox API 作为地图组件，但我想将其切换到 HERE 的地图图像 API。我已经在我的应用程序上设置了地图，但我想在我之前创建的 .env 文件中隐藏我的 app_id 和 app_code。这可能吗？我知道也可以限制哪些域可以访问 key/code，但为了高枕无忧，我想将密钥隐藏在 .env 文件中。

这是我的 .env 文件（当然没有密钥）：

REACT_APP_HERE_ID={my app_id}
REACT_APP_HERE_CODE={my app_code}

这是我将它引入我的应用程序的地方：

const app_id = process.env.REACT_APP_HERE_ID;
const app_code = process.env.REACT_APP_HERE_CODE;

当我console.logapp_id和app_code时，他们都returnundefined。我从 Mapbox 获得的前一个 API 键在我的 .env 文件中工作正常，但我似乎无法从这里获得 app_id 和 app_code 相同的识别方法。

我错过了什么吗？仅限制哪些域能够使用我的 ID 和代码是否更容易？

Answer 1

我假设您正在为您的项目 building/starting 使用 'react-scripts' 模块。同样根据上面的描述，我可以看到您正在使用正确的前缀 'REACT_APP_' 来声明 .env 文件中的任何变量。

只需使用以下命令重新构建应用程序：

npm run-scripts build

或者只需使用以下命令重启您的应用：

npm react-scripts start

我觉得应该没问题。

并且，是的，您可以使用 https://developer.here.com/ 提供的功能 "Secure app credentials against a specific domain" 来限制哪个域应该使用您的 AppID 和 AppCode，就在您看到您的 ID 和代码的地方下方。

希望这对您有所帮助。

让 process.env 与 HERE API 键一起工作

Getting process.env to work with HERE API keys

here-api

dotenv