如何在Nuxt.js 2中隐藏Apollo调用Strapi的JWT身份验证令牌？

核心问题分析 #

你当前的配置把JWT直接写在客户端Apollo的httpLinkOptions里，不管用.env还是privateRuntimeConfig，只要是客户端可访问的配置，最终都会被打包到前端代码中暴露给浏览器。因为Apollo客户端运行在前端，直接在这里配置服务端级别的JWT本身就是错误的思路。

正确解决方案（两种可选） #

方案一：用Nuxt代理在服务端添加JWT（适合服务端固定令牌场景） #

通过Nuxt的代理模块，把前端的Apollo请求转发到Strapi，令牌只在服务器端的代理层添加，前端完全看不到。

1. 安装代理模块

npm install @nuxtjs/proxy --save

2. 修改nuxt.config.js配置

export default {
  modules: ['@nuxtjs/proxy', '@nuxtjs/apollo'],

  // 私有配置（仅服务器端可访问）
  privateRuntimeConfig: {
    strapiJwt: process.env.STRAPI_JWT, // 从.env文件读取，不会暴露到前端
    strapiUrl: process.env.BACKEND_URL || 'http://localhost:1337'
  },

  // 客户端配置（前端可访问）
  publicRuntimeConfig: {
    apolloEndpoint: '/api/graphql' // 代理后的地址
  },

  // 代理配置
  proxy: {
    '/api/': {
      target: process.env.BACKEND_URL || 'http://localhost:1337',
      pathRewrite: { '^/api': '' },
      onProxyReq: (proxyReq) => {
        // 在服务器端添加Authorization头
        proxyReq.setHeader('Authorization', `Bearer ${process.env.STRAPI_JWT}`)
      }
    }
  },

  apollo: {
    clientConfigs: {
      default: {
        httpEndpoint: process.env.NODE_ENV === 'production'
          ? '/api/graphql'
          : '/api/graphql'
        // 这里不再需要配置httpLinkOptions的headers，交给代理处理
      }
    }
  }
}

3. 配置.env文件（放在项目根目录，添加到.gitignore）

STRAPI_JWT=你的Strapi服务端JWT令牌
BACKEND_URL=https://your-strapi-domain.com

方案二：动态添加用户登录后的JWT（适合用户专属令牌场景） #

如果是用户登录后获取的个人JWT，应该在前端动态注入到Apollo请求头，而非硬编码配置：

1. 在登录成功后，把用户的JWT存储到Vuex或Cookie中

// 示例登录方法（假设从Strapi获取JWT）
async login() {
  const { data } = await this.$axios.post('/auth/local', {
    identifier: this.email,
    password: this.password
  })
  // 存储到Vuex
  this.$store.commit('user/setToken', data.jwt)
  // 或者存储到Cookie（更安全）
  this.$cookies.set('user_jwt', data.jwt, { path: '/', maxAge: 60 * 60 * 24 })
}

2. 修改Apollo客户端配置，动态获取令牌

// nuxt.config.js
apollo: {
  clientConfigs: {
    default: {
      httpEndpoint: process.env.NODE_ENV === 'production'
        ? process.env.BACKEND_URL + '/graphql'
        : 'http://localhost:1337/graphql',
      // 动态设置请求头
      getAuth: () => {
        // 从Vuex或Cookie获取令牌
        const token = process.client ? this.$store.state.user.token : null
        // 或者从Cookie获取（需安装cookie-universal-nuxt）
        // const token = this.$cookies.get('user_jwt')
        return token ? `Bearer ${token}` : ''
      }
    }
  }
}

对你之前尝试问题的解释 #

1. .env变量暴露问题：你直接在客户端的Apollo配置中使用process.env.MY_KEY，而clientConfigs属于前端运行的配置，Nuxt会把这些变量打包到前端代码中，自然会在/_nuxt/app.js里暴露。只有在privateRuntimeConfig里的变量才不会被打包到前端。
2. privateRuntimeConfig无法访问问题：privateRuntimeConfig的变量仅能在服务器端代码（如asyncData、serverMiddleware等）中访问，而nuxt.config.js里的apollo.clientConfigs是客户端配置，运行在前端，所以拿不到私有配置的变量。

内容的提问来源于stack exchange，提问作者MH info