SvelteKit页面密码保护实现方案咨询（兼容Netlify/Vercel）

针对游戏场景的低安全级密码保护需求（阻止有意愿的作弊用户），核心思路是全流程服务端控制，避免前端暴露任何敏感信息或路由线索，以下是具体实现步骤：

核心实现逻辑 #

所有验证、路由访问控制都在服务端完成，前端仅负责密码输入和跳转，确保密码、路由信息、页面JS都不会泄露给未授权用户。

1. 密码验证：避免用户获取密码 #

• 密码存储：将密码存入部署平台的环境变量（Netlify/Vercel控制台均可设置），变量名设为PASSWORD，确保密码不会出现在前端代码或静态文件中。
• 会话验证：通过服务端Cookie标记授权状态，不直接存储密码。
  • 创建密码验证接口src/routes/auth/verify/+server.js：

    import { PASSWORD } from '$env/static/private';
    import { redirect, fail } from '@sveltejs/kit';
    
    export async function POST({ request, cookies }) {
      const { password } = await request.json();
      if (password === PASSWORD) {
        // 设置HttpOnly Cookie，防止前端读取，有效期1小时
        cookies.set('auth', 'verified', {
          path: '/',
          httpOnly: true,
          secure: process.env.NODE_ENV === 'production',
          maxAge: 3600
        });
        throw redirect(303, '/protected'); // 验证通过后跳转至受保护路由
      }
      return fail(401, { invalid: true });
    }
    

  • 创建密码输入页src/routes/auth/+page.svelte：

    <script>
      let password = '';
      let error = '';
    
      async function handleSubmit(e) {
        e.preventDefault();
        const res = await fetch('/auth/verify', {
          method: 'POST',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify({ password })
        });
        if (!res.ok) error = '密码错误';
      }
    </script>
    
    <form on:submit={handleSubmit}>
      <input type="password" bind:value={password} placeholder="输入游戏密码" />
      <button type="submit">进入游戏</button>
      {#if error}<p style="color:red">{error}</p>{/if}
    </form>
    

2. 隐藏受保护路由：防止源码泄露路由信息 #

• 路由访问控制：在受保护路由的+page.server.js中添加验证逻辑，未授权用户直接重定向到密码页，且服务端返回404/302，不会暴露路由存在：

  import { redirect } from '@sveltejs/kit';
  
  export async function load({ cookies }) {
    const authStatus = cookies.get('auth');
    if (authStatus !== 'verified') {
      throw redirect(303, '/auth');
    }
    // 仅验证通过时返回页面数据，否则不会执行到这里
    return { gameLevelData: '...' };
  }
  

• 避免硬编码路由：前端代码中不要出现受保护路由的硬编码链接，所有访问入口均通过验证后的服务端跳转实现，未授权用户无法知晓路由路径。

3. 阻止下载受保护页面JS #

• 利用SvelteKit的按需加载+服务端渲染特性：未授权用户请求受保护路由时，服务端直接返回重定向或错误，不会返回页面组件的JS文件；只有验证通过的用户，才会触发对应JS的加载请求，确保未授权用户无法获取页面相关代码。

兼容Netlify/Vercel的部署说明 #

• 适配对应平台：使用@sveltejs/adapter-netlify或@sveltejs/adapter-vercel作为SvelteKit适配器，服务端逻辑会自动转为平台的Serverless/Edge Functions。
• 环境变量配置：直接在Netlify/Vercel的项目控制台中添加PASSWORD变量，无需修改代码。
• 静态文件控制：SvelteKit在静态生成时会跳过需要服务端验证的路由，平台不会将受保护页面的JS打包到静态资源中，进一步避免泄露。

额外优化建议 #

• 可设置Cookie有效期为游戏会话时长，比如30分钟，避免长期授权。
• 若需要多密码支持，可将环境变量设为PASSWORD_LIST=pass1,pass2,pass3，验证时检查输入密码是否在列表中。

内容的提问来源于stack exchange，提问作者Finley Baker