如何使用 Nuxt2 访问组件内的请求标头答案

【问题标题】：How to access request headers inside a component with Nuxt2如何使用 Nuxt2 访问组件内的请求标头
【发布时间】：2022-11-10 22:01:48
【问题描述】：

我有一个启用服务器端渲染的 Nuxt 项目，部署到 Lambda 和 CloudFront。

在我的 nuxt.js 文件中，我可以像这样拦截 CloudFront 标头：

const countryCode = req.header('cloudfront-viewer-country')

将这些标题的值传递到我的页面或组件之一以便我可以在那里检查它们的最佳方法是什么？

【问题讨论】：

如果我没记错的话，req 仅在 Node.js 上下文中可用。因此，一旦您的应用程序被水合，您将无法访问该应用程序。使用 if (process.server) { 仍然是 IMO 的方式，将其存储到 cookie 中，你会很高兴的。

标签： nuxt.js amazon-cloudfront server-side-rendering

【解决方案1】：

有几种方法可以做到这一点。基本上，您想要实现的是将仅服务器端的值传输到客户端。

Nuxt 通过全局变量window.__NUXT__ 注入客户端所需的服务器端数据来实现这一点。它包括来自许多来源的数据，例如：

asyncData 页面挂钩
fetch 组件挂钩
Vuex 存储状态

运行时配置（环境变量）

可能还有其他人...

所以，如果你需要这个请求头单页组件：使用asyncData。

// pages/index.vue
export default {
  asyncData(ctx) {
    return {
      country: ctx.req.headers['cloudfront-viewer-country']
    }
  }
}

如果你需要它单组分：使用fetch 钩子：

// pages/index.vue
export default {
  data () {
    return {
      country: 'default country value'
    }
  },
  fetch() {
    if (process.server) {
      this.country = this.$nuxt.context.req.headers['cloudfront-viewer-country']
    }
  }
}

如果你需要它在应用程序中全局：使用带有服务器端插件的 vuex 存储：

// plugins/read-headers.server.js

export default const readHeaders = (ctx) => {
  const country = ctx.req.headers['cloudfront-viewer-country']
  this.$store.commit('SET_COUNTRY', country)
}

// store/index.js

export const state = () => ({
  country: ''
})

export const mutations = {
  SET_COUNTRY(state, country) {
    state.country = country
  }
}

【讨论】：