如何在 Nuxt.js 2 上隐藏身份验证令牌？

Question

我需要使用 JWT 身份验证令牌通过 Apollo 从 NuxtJS 前端查询 Strapi 后端。 我搜索了很多关于如何在 Nuxt.js 2 上隐藏身份验证令牌的信息，但没有成功。我尝试使用

.env

和

privateRuntimeConfig

:

• 使用

  .env

  ，当我使用

  process.env.MY_KEY

  时，键的值在浏览器中的

  /_nuxt/app.js

  中以纯文本形式显示。
• 使用

  privateRuntimeConfig

  ，我根本无法从

  nuxt.config.js

  访问密钥。

这是我的

nuxt.config.js

Apollo 配置：

apollo: {
    clientConfigs: {
      default: {
        httpEndpoint:
          process.env.NODE_ENV === "production"
            ? process.env.BACKEND_URL ||
              "my-website.com/graphql"
            : process.env.BACKEND_URL || "http://localhost:1337/graphql",

        httpLinkOptions: {
          headers: {
            authorization: `Bearer MY_JWT_TOKEN`,
          },
        },
      },
    },
  },

请随时询问更多信息。

Answer 1

OP 通过使用只读的 Strapi 令牌解决了这个问题，防止任何不受欢迎的人能够编辑 OP 的 CMS 内容。

其他替代方案是：

• 使用任何云功能，例如 Netlify 上的
• 在某处使用另一台服务器作为代理
• 使用Nuxt3的固有的服务器功能
• 仅使用 Nuxt 服务器组件
将内容保留在服务器端