vue.js - VitePress搭建的个人博客里如何对部分内容使用密码加密查看？

Question

我使用VitePress来搭建我个人的博客放在我的云服务器上方便随时查看，但是有一些数据涉及隐私不方便公开展示，觉得做一个登录界面有点没必要也不方便别人查看公开的内容，像VuePress的话找到了一个
vuepress-plugin-encrypt插件来实现部分内容使用密码来加密，输入密码后查看
好像VitePress就找不到类似这样的插件，有什么插件或者方法能实现这样的需求？

Answer 1

静态的html没有必要吧？防君子不防小人。

除非说你把页面的内容在编译时期通过密钥加密混淆，后续渲染的时候通过输入密钥去解密成原本的html内容渲染到页面中。

Answer 2

未输入密码前

输入密码后

方案是使用自定义组件

组件代码

Answer 3

在 VitePress 中实现内容加密查看的功能，你可以考虑以下几种方法：

1. 使用自定义组件和前端加密逻辑：

   • 创建一个自定义的 Vue 组件，该组件用于包裹需要加密的内容。
   • 在组件内部，使用前端加密库（如 crypto-js）对内容进行加密。
   • 提供一个输入框供用户输入密码，并使用相同的加密库进行解密。
   • 当密码正确时，显示解密后的内容。

2. 使用服务器端渲染和加密：

   • 你可以使用服务器端渲染（SSR）来在服务器端处理内容的加密。
   • 当用户访问受保护的页面时，服务器会检查用户是否已提供正确的密码。
   • 如果密码正确，服务器将解密内容并将其传递给 VitePress 进行渲染。
   • 这可能需要你编写自定义的服务器端代码来处理认证和加密逻辑。

3. 使用第三方插件或库：

   • 尽管目前没有专门为 VitePress 设计的加密插件，但你可以尝试寻找是否有适用于 Vue 或通用前端框架的加密插件，并将其集成到 VitePress 中。
   • 另一种方法是查看是否有适用于 VitePress 的自定义主题或插件，这些主题或插件可能已经包含了加密功能。

4. 使用外部服务：

   • 你也可以考虑使用外部服务，如内容管理系统（CMS）或静态网站生成器（SSG），这些服务可能提供了内容加密的功能。
   • 你可以将需要加密的内容放在外部服务中，并在 VitePress 中通过 API 调用的方式获取解密后的内容。

请注意，这些方法都需要在前端处理密码和加密逻辑，因此可能存在安全风险。确保你使用的加密方法足够安全，并且遵循最佳的安全实践。此外，对于敏感数据的处理，最好是在服务器端进行，而不是在客户端进行。