nuxt:将数据从服务器插件传递到客户端

Question

我在auth代理后面有一个nuxt。请求将到达nuxt(仅当(它被授权时，在这种情况下，将设置X-auth-username(和其他(标头。

我发现，使用服务器插件，我可以在请求时读取这些信息。但是，数据不会从服务器发送到客户端。如何让服务器向客户端发送信息头(尤其是用户名(？

到目前为止我的插件：

import { Plugin } from '@nuxt/types'
import { IncomingHttpHeaders } from 'http'
declare module '@nuxt/types' {
interface NuxtAppOptions {
$headers: IncomingHttpHeaders
}
}
const getAuth: Plugin = (context, inject) => {
const headers = context.req.headers
inject('headers', headers)
}
export default getAuth

注意我使用的是nuxt-composition-api，而不是vuex。

Answer 1

您可以使用beforeNuxtSender-nuxt钩子在服务器上设置属性，这些属性将在html中序列化，并可在客户端上检索：

// in nuxt plugin
if (process.server) {
// set property on server
context.beforeNuxtRender(({ nuxtState }) => {
nuxtState.headerValue = 'test';
});
} else {
// retrieve it on client
let valueOnClient = context.nuxtState?.headerValue;
}

Answer 2

在模板或组件的生命周期方法中，注入的header应作为$headers可用，作为this.$headers。