vue.js - 单击按钮后如何在 Nuxt 中使用私有(private) API key 发送请求？

Question

我将我的 API 凭据保存在 nuxt.config.js 文件的 privateRuntimeConfig 选项中。我希望这些 key 在服务器中是安全的，我不希望它们在客户端中。

现在，我想在用户单击按钮后向 API 发送请求，但我需要使用该键，但它们不在客户端中。所以，我不知道该怎么做。我有这样的东西:

index.vue

<template>
<form method="post" action="#" @submit.prevent="sendRequest">
    <input v-model="someUserData">
    <button type="submit">Send some data :D</button>
</form>
</template>

<script>
...
data() {
     return() {
         someUserData: ""
     }
},

methods: {
     sendRequest() {
         // Here I should send the request using the API Keys
     }
}
...
</script>

我的主要想法是，当用户单击按钮时，必须向 Nuxt 服务器发送一个请求，其中包含表单中引入的用户数据，因此，在 Nuxt 服务器中，我可以访问 API 凭据，然后发送向 API 请求...但老实说我不知道​​如何访问 Nuxt 服务器，我不知道我是否可以在 Nuxt 服务器内部创建路由以从 Nuxt 客户端发送请求🤔

你能帮帮我吗？

Answer 1

TLDR:您无法在客户端隐藏内容。

---

在这里，您共享的代码是同构的(或通用)，这意味着它将在服务器和客户端上运行。
因此，这不是您可以使用私有(private)变量的地方。这些用于在服务器上仅运行的代码，例如serverMiddleware。 ，nuxtServerInit，在构建/生成您的应用程序时 (buildModules) 或类似的。
基本上，server lifecycle 上的所有内容仅(而不是同时在服务器和客户端中)。

要记住的一件事是 Nuxt 仍然是一个前端应用程序。这意味着你不能像那样使用私钥，除非它是公开的。
如果你的前端需要它，你需要把它暴露在某个地方。或者使用后端代理/无服务器功能来隐藏它(基本上有一个非客户端中间件)。

所以你需要有某种身份验证(例如 JWT)，在构建期间以某种方式存储它们并在以后重用它们，使用后端服务器作为代理，使用可以公开的 API key (很多的 API 为您提供前端的那种 key )等...

您可以在 stackoverflow 上搜索/查看其他问题来解释这一点，但即使 Nuxt 确实有一个 Node.js 服务器，它的主要用途是针对 SPA(公共(public)代码)。