问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

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

头像
illusion
    13911635

    业务场景：

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

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

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

    麻烦大佬们看下，愿意v100

    前端javascriptnuxt3nuxtjsvue.js
    阅读 1.3k
    avatarAI BotBETA

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

    1. 设置 Redis 和 JWT：
    * 确保你已经正确设置了 Redis 数据库，并在服务端配置了 JWT 验证。
    1. 获取用户数据：
    * 当用户在界面上输入用户名和密码后，发送请求到服务端进行验证。
* 如果验证成功，将用户数据存储在 Redis 中，并生成一个 JWT。
* 将 JWT 写入到客户端的 cookie 中。
    1. 在服务器端使用 Redis 数据：
    * 在 Nuxt 3 的服务端代码中，你可以使用 `nuxtServerInit` 钩子来在服务器渲染之前获取 Redis 中的用户数据。
* 在 `nuxtServerInit` 钩子中，你可以使用 Redis 客户端库（如 ioredis）来从 Redis 中获取用户数据。
* 获取到用户数据后，你可以将其存储在 Vuex store 或其他全局状态管理库中，以便在组件中访问。
    1. 在客户端访问用户数据：
    * 在你的 Nuxt 3 应用程序中，你可以使用 Vuex store 或其他全局状态管理库来访问用户数据。
* 由于你已经在服务器端将用户数据存储在 Vuex store 中，因此在客户端渲染时，这些数据将自动可用。
* 你可以在任何组件中通过 `$store` 或 `useStore` 钩子来访问这些用户数据。

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

    // nuxt.config.js
export default {
  // ...
  serverMiddleware: [
    // 添加你的服务器中间件，用于处理 Redis 和 JWT
  ],
  // ...
}
    // store/index.js
import { 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 兼容。

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

    1 个回答
    得票最新
    头像
    Meathill
      22.6k133642
      ✓ 已被采纳

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

      1. 用户的数据写入 cookie 后，发起请求时会携带
      2. 所以 SSR 的时候你能拿到 cookie 和 header
      3. 但是因为可能涉及用户隐私数据，所以从 SSR 里发起的请求默认不会携带用户的 header 和 cookie，你需要自己处理
      4. 通过 useRequestHeader 和 useCookie 你就可以拿到这些数据
      5. 然后放到请求里即可
      6. 至于 SSR 你直接用 useAsyncData 或者 useFetch 就好
      7. 之后 Nuxt 会帮你把数据发到前端，你就当它们存在，直接使用就好。
      撰写回答
      你尚未登录，登录后可以
      • 和开发者交流问题的细节
      • 关注并接收问题和回答的更新提醒
      • 参与内容的编辑和改进，让解决方法与时俱进
      推荐问题