nuxt.js - 在 Nuxt 2.13 中使用 privateRuntimeConfig

Question

🤙🏻
我找到了 this great post在 Nuxt v2.13 应用程序中正确管理环境变量。
我只是尝试实现建议的逻辑，但遇到一些问题想请教您。
我将 publicRuntimeConfig 和 privateRuntimeConfig 设置如下。
我正在使用 Contentful，所以我必须正确设置 Contentful token 才能进行 API 调用。

export default {
  // Nuxt target - See https://nuxtjs.org/api/configuration-target
  target: 'static',

  // Nuxt rendering mode - See https://nuxtjs.org/api/configuration-mode
  mode: 'universal',

  // Both server and client.
  publicRuntimeConfig: {
    backendApi: process.env.BACKEND_API_URL
    shopUrl: process.env.SHOP_URL
  },

  // Only available on server using same $config (it overrides publicRuntimeConfig)
  privateRuntimeConfig: {
    ctfSpaceId: CTF_SPACE_ID,
    ctfCdaAccessToken: CTF_CDA_ACCESS_TOKEN,
    ctfCpaAccessToken: CTF_CPA_ACCESS_TOKEN,
    ctfEnvironment: CTF_ENVIRONMENT
  },

在模块导出语句的上方，我必须定义 .env 中的数据，因此:

require('dotenv').config()

const {
  CTF_SPACE_ID,
  CTF_CDA_ACCESS_TOKEN,
  CTF_CPA_ACCESS_TOKEN,
  CTF_ENVIRONMENT,
} = process.env

接下来，进入 Nuxt 页面组件(选择 pages/index.vue 作为引用)，记住 privateRuntimeConfig 仅在服务器端可用，我使用 $config 提升 asyncData 钩子(Hook):

 async asyncData({ app, $config: { ctfSpaceId, ctfCdaAccessToken } }) {
    const $i18n = app.i18n
    const client = contentful.createClient({
      space: ctfSpaceId,
      accessToken: ctfCdaAccessToken,
    })
   ...
}

酷，我刷新了运行 Nuxt 的浏览器选项卡，asyncData 完成了它的工作，并且适本地设置了私有(private)配置变量。
接下来，我浏览其他应用页面，回到 index 和 💥。
Nuxt 崩溃并且 $config 私有(private)变量未定义。
我不想为此找到解决方法，因为我们谈论的是安全性，因此我只能询问我的配置是否正确以及 Nuxt 在后台发生了什么。
Nuxt.js 文档是明确的:

asyncData is called every time before loading the page component. It will be called server-side once (on the first request to the Nuxt app) and client-side when navigating to further routes.

所以问题是如何在客户端正确加载私有(private)配置变量。
一位导师 friend 会说一个神奇的词:Noob。 😫

Answer 1

无法在客户端正确加载私有(private)变量。这样做将暴露您的所有 secret ，这正是privateRuntimeConfig 的原因。现在存在。之前，很多人都犯了将 secret 添加到 Nuxt 的错误env ，暴露他们的客户端。
不幸的是，如果您想在运行时访问这些 API，您需要更改您执行此操作的方式。
您要么需要静态生成您的项目，要么需要运行一个 API 来处理使用 API key 调用您的 3rd 方服务。
见 https://nuxtjs.org/guide#static-generated-pre-rendering-用于静态生成项目(不需要服务器)。您可能还需要使用 https://nuxtjs.org/api/configuration-generate#routes用于生成动态页面(例如 _product.vue )
见 https://nuxtjs.org/api/configuration-servermiddleware/可能是让 API 与 Nuxt 服务器一起运行的最简单方法。
如果您只是在经营博客或小商店，我强烈建议您使用静态生成。托管更简单，更便宜，并且您的项目可能已经可以按原样导出。您只需要找到一个好的主机，例如 Netlify。