在Nuxtjs中保护API密钥

时间:2019-10-16 00:02:03

标签: vue.js vuex nuxt.js api-key

我已经研究出解决方案的三种不同可能性:我想进行异步API调用(使用dotenv变量存储凭据),然后在应用程序初始化时将返回的数据提交给Vuex-保持凭据安全。

  1. 当前,我正在尝试使用serverMiddleware,但是在访问上下文时遇到了麻烦。这可能吗?当前仅出现“未定义存储”错误。

  2. 此外,在研究之后,我一直发现使用常规中间件不是一个好主意,因为在客户端运行任何代码都会暴露env变量……但是我很困惑。 if (!process.client) { ... }不照顾这个吗?还是我错过了更大的前景?

  3. 另外,如果事实证明可以使用中间件来保护凭据,则可以明智地使用separate-env-module来确保没有任何东西泄露给客户端-边?

谢谢,我希望能更全面地了解这一点。

1 个答案:

答案 0 :(得分:2)

您可以使用serverMiddleware

您可以这样做:

client->调用serverMiddleware-> servermiddleware调用API。

那样,API密钥不在客户端中,而是保留在服务器上。


示例:

远程api是:https://maps.google.com/api/something

您的api:https://awesome.herokuapp.com

由于您自己的api可以访问环境变量,并且您希望将api密钥包含在生成的客户端内部版本中,因此您将创建一个serverMiddleware来代理对您的请求。

这样一来,您的客户最终只会调用https://awesome.herokuapp.com/api/maps,而该端点只会调用https://maps.google.com/api/something?apikey=123456并将响应返回给您