起源与想法

在做个人网站的时候，我有几个不同的页面：比如 导航页、博客、小说 等等。
但是我并不希望这些页面都直接裸露出来让任何人访问，而是想加一层 中转页，用户输入密码后才能跳转到目标站点。

这样做有几个目的：

  • 访问控制：只允许知道密码的人进入我特定的站点。
  • 统一入口：不管是博客、小说还是别的项目，都通过同一个中转入口来跳转。
  • 实验性质：尝试在前端做一个简单的加密验证逻辑，不依赖后端。

于是就有了Veeink-Gatekeeper这个项目。

实现思路

我选用的是 Vue 3 + Vite 来写前端逻辑。

  • 一个简单的输入框，用户输入密码。
  • 校验成功后，跳转到对应站点。
  • 校验失败则提示错误信息。
  • 校验状态存储在 localStorage，避免每次访问都要输入密码。

站点信息我用一个 JSON 文件存放，比如：

1
2
3
4
5
6
7
8
9
10
11
12
[
  {
    "id": "blog",
    "title": "博客",
    "url": "https://blog.3865472.xyz"
  },
  {
    "id": "novel",
    "title": "小说",
    "url": "https://novel.3865472.xyz"
  }
]

用户访问 https://gate.3865472.xyz/blog，系统会匹配到 id=blog，如果密码正确就跳转。

部署过程

Vercel 部署

  1. 在 Vercel 新建项目，选择 GitHub 仓库。
  2. 默认框架选 Vite 即可，构建命令 npm run build，输出目录 dist。
  3. 部署完成后，Vercel 会提供一个域名，比如 xxx.vercel.app，绑定到自己的子域名即可，比如 gate.3865472.xyz。

Cloudflare Pages 部署

  1. 打开 Cloudflare Pages，新建项目并连接 GitHub 仓库。
  2. 构建设置同样是 npm run build，输出目录 dist。
  3. 部署后可以直接绑定自定义域名，比如 gate.3865472.xyz。

踩坑与解决

  • 问题 1：访问路径 404
    • 一开始访问 https://gate.3865472.xyz/blog 时总是返回 404。
    • 解决：Vercel/Cloudflare Pages 默认是静态文件服务，需要配置 重写规则，让所有路径都指向 index.html。
  • 问题 2：空白页
    • 刚开始 Vue Router 用了默认的 history 模式，但没配置好，导致页面空白。
    • 解决：改成了 /:site 路由，并在前端解析参数，问题就解决了。
  • 问题 3：密码存储
    • 最初密码是写死在前端，显然不安全。
    • 后来改成读取 import.meta.env 环境变量，部署时通过 Vercel/Cloudflare 的环境变量功能注入。

最终效果

现在访问 https://gate.3865472.xyz/blog，会先出现一个密码验证页面，输入正确密码后才能进入我的博客。
这样一来，导航页和子站点之间多了一层简单的保护和控制。

image-20250829171320960

虽然这不是一个非常严格的安全方案（前端验证总是可以被绕过），但作为一个小实验和过渡层，已经能满足我的需求。

相关链接