时间戳

首页 > 解决方案 > 在 Nuxt.js 中禁用客户端水合或停止在 Nuxt.js 中公开原始数据

javascript - 在 Nuxt.js 中禁用客户端水合或停止在 Nuxt.js 中公开原始数据

问题描述

我创建了一个使用 Nuxt.js 和服务器端渲染的 Web 应用程序。

我不想暴露我的后端数据，所以我尝试使用 asyncData 和 Axios 向我的后端服务器请求。

但是 Nuxt.js 将我的后端数据暴露给带有window.__NUXT__.data变量的客户端。

我尝试使用render:route钩子删除它，但它说

[Vue 警告]：客户端渲染的虚拟 DOM 树与服务器渲染的内容不匹配。这可能是由不正确的 HTML 标记引起的，例如在 p 中嵌套块级元素或缺少 . Bailing 水合作用并执行完整的客户端渲染。

所以我尝试删除导致不匹配错误的脚本，但这会使我的站点上的脚本停止工作。

那么问题来了：如何禁用客户端水合（客户端虚拟 DOM 树渲染）？或如何停止暴露原始数据？

我在这段代码中使用了 asyncData：

asyncData ({ params, error }: { params: { id: string }, error: Function }) {
  return axios.post('(backend)', data).then(res => res.data ? ({ data: res.data }) : error({ statusCode: 400, message: 'Bad request' }));
}

标签： javascriptnode.jsnuxt.js

解决方案

你不能停止你的 SSR 内容的水合（至少现在还没有，计划很快只提供静态内容）。
Nuxt 旨在将 SSR 添加到您的日常 VueJS SPA。如果您不想要水合，那么您可能在这里使用了错误的框架。
Astro可能更合适，仅举一个例子。你也可以在这里找到更多。

这里解释了DOM 不匹配问题（原因 + 解决方案）。

如何在客户端隐藏东西？

简短的回答：你不能。
长答案可用here。

如果要在页面上显示某些内容，则需要数据。
现在我们正在使用 SPA 在浏览器中拥有本地状态。由于它是本地的并且在你的眼睛下，状态就存在于你的浏览器中，所以你不能真正隐藏它，而且你为什么要这样做？
如果您想隐藏数据，可能最初不要发送它或至少发送图像。
您也可以进行一些混淆，但这只是一个创可贴，在语义/性能/等方面并不是很好......

如果您有一些只想向管理员显示的敏感数据，您可以使用一些身份验证和权限检查。上面的更多细节，在长答案中。

推荐阅读