javascript - nuxt3 怎么把从数据库（redis）查询的用户数据发送给客户端？

Question

业务场景：

1. 用户在界面上输入用户名和密码；
2. server端做权限验证，然后把用户数据存入redis；
3. server端，把用户关键信息jwt写入cookie，（jwt解码后是：{ userid: 1 }，之后可以通过userid从redis查用户数据）；
4. 之后每次加载页面，能把用户数据传到客户端页面html；(SSR)

我想像掘金的那样，但是不知道他是怎么做的。（存储在 --NUXT-- 里）

我现在用的是最笨的方法，通过服务端插件重写html，这样在在前端还要处理一次，没有做到前后端状态共享：

麻烦大佬们看下，愿意v100

Answer 1

我不理解，为什么不认真看文档呢……

1. 用户的数据写入 cookie 后，发起请求时会携带
2. 所以 SSR 的时候你能拿到 cookie 和 header
3. 但是因为可能涉及用户隐私数据，所以从 SSR 里发起的请求默认不会携带用户的 header 和 cookie，你需要自己处理
4. 通过 useRequestHeader 和 useCookie 你就可以拿到这些数据
5. 然后放到请求里即可
6. 至于 SSR 你直接用 useAsyncData 或者 useFetch 就好
7. 之后 Nuxt 会帮你把数据发到前端，你就当它们存在，直接使用就好。

• https://nuxt.com/docs/api/composables/use-cookie
• https://nuxt.com/docs/api/composables/use-request-header
• https://nuxt.com/docs/getting-started/data-fetching

Answer 2

在 Nuxt 3 中，你可以使用 Nuxt 3 的服务端渲染（SSR）功能，结合 Redis 数据库来将用户数据发送到客户端。以下是一个基本的步骤来实现你的需求：

1. 设置 Redis 和 JWT：

* 确保你已经正确设置了 Redis 数据库，并在服务端配置了 JWT 验证。

2. 获取用户数据：

* 当用户在界面上输入用户名和密码后，发送请求到服务端进行验证。* 如果验证成功，将用户数据存储在 Redis 中，并生成一个 JWT。* 将 JWT 写入到客户端的 cookie 中。

3. 在服务器端使用 Redis 数据：

* 在 Nuxt 3 的服务端代码中，你可以使用 `nuxtServerInit` 钩子来在服务器渲染之前获取 Redis 中的用户数据。* 在 `nuxtServerInit` 钩子中，你可以使用 Redis 客户端库（如 ioredis）来从 Redis 中获取用户数据。* 获取到用户数据后，你可以将其存储在 Vuex store 或其他全局状态管理库中，以便在组件中访问。

4. 在客户端访问用户数据：

* 在你的 Nuxt 3 应用程序中，你可以使用 Vuex store 或其他全局状态管理库来访问用户数据。* 由于你已经在服务器端将用户数据存储在 Vuex store 中，因此在客户端渲染时，这些数据将自动可用。* 你可以在任何组件中通过 `$store` 或 `useStore` 钩子来访问这些用户数据。

下面是一个简单的示例代码，展示了如何在 Nuxt 3 中实现这一过程：

// nuxt.config.jsexport default {  // ...  serverMiddleware: [    // 添加你的服务器中间件，用于处理 Redis 和 JWT  ],  // ...}

// store/index.jsimport { defineStore } from 'nuxt3'export const useStore = defineStore(() => ({  state: () => ({    userData: null,  }),  actions: {    async fetchUserData() {      // 在这里使用 Redis 客户端库从 Redis 中获取用户数据      // 假设你已经有一个名为 getUserDataFromRedis 的函数      const userData = await getUserDataFromRedis()      this.userData = userData    },  },}))

// pages/_app.vue<script setup>import { useStore } from '@/store'const store = useStore()if (process.server) {  store.dispatch('fetchUserData')}</script>

<!-- SomeComponent.vue --><template>  <div>    <!-- 使用用户数据 -->    <p>{{ userData.username }}</p>  </div></template><script setup>import { useStore } from '@/store'const store = useStore()const userData = store.state.userData</script>

请注意，上述代码仅提供了一个基本的框架和思路，你需要根据你的具体需求和项目结构进行调整和完善。此外，还需要确保你的 Redis 客户端库和 JWT 配置正确，并且与 Nuxt 3 兼容。

希望这可以帮助你实现你想要的功能！如果你有其他问题或需要进一步的帮助，请随时提问。