如何使用Nuxt中的私有API密钥在点击按钮后发送请求？ [英] How to use private API keys in Nuxt to send a request after click a button?

问题描述

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

现在，我想在用户单击按钮后向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客户端🤔的请求

你能帮我吗？

推荐答案

TLDR：您无法隐藏客户端的内容。

---

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

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

因此，您需要有某种身份验证(例如，使用JWT)，在构建过程中以某种方式存储它们并在以后重用它们，使用后端服务器作为代理，使用可以公开的API密钥(许多API为您提供了此类前端密钥)，等等...

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

这篇关于如何使用Nuxt中的私有API密钥在点击按钮后发送请求？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！