如何在iPad Safari的餐厅PWA中为特定页面设置PIN码保护？

嘿，这个餐厅PWA的场景需求挺接地气的，我来给你梳理下在iPad Safari环境下怎么实现PIN码保护、限制顾客返回主页面的功能：

我们需要在两个关键节点做控制：

1. 服务员上班会话初始化（身份验证后）设置PIN码并安全存储；
2. 从账单页返回餐桌列表主页面时，强制触发PIN验证，验证不通过则阻止跳转。
   同时要适配iPad Safari的特殊行为（比如手势返回、PWA全屏模式）。

1. PIN码的存储与会话管理 #

• 用sessionStorage存储PIN的哈希值（避免明文存储），因为会话存储会在浏览器关闭后自动清除，刚好匹配服务员上班会话的生命周期：

  // 服务员设置PIN时（身份验证成功后）
  function setPin(newPin) {
    // 用简单哈希处理，餐厅场景足够，也可以用SHA-256增强安全性
    const pinHash = btoa(newPin);
    sessionStorage.setItem('protectedPinHash', pinHash);
  }
  

• 建议设置PIN时加二次确认，避免输入错误。

2. 页面导航拦截（适配iPad Safari） #

这是核心环节，要覆盖三种返回场景：浏览器返回按钮、前端路由跳转、iPad手势返回：

拦截浏览器/路由返回 #

如果用前端路由（比如React Router、Vue Router），用路由守卫拦截返回主页面的动作：

// React Router 示例
import { useHistory } from 'react-router-dom';

function BillPage() {
  const history = useHistory();

  useEffect(() => {
    // 拦截路由跳转
    const unblock = history.block((transition) => {
      // 仅拦截返回主页面的请求
      if (transition.pathname === '/' && window.location.pathname.startsWith('/bill/')) {
        // 触发PIN验证模态框
        showPinModal().then((isValid) => {
          if (isValid) {
            unblock(); // 验证通过，解除拦截并允许跳转
            history.goBack();
          }
        });
        return false; // 先阻止跳转
      }
      return true; // 其他跳转允许通过
    });

    return unblock; // 组件卸载时解除拦截
  }, [history]);

  // 其余组件逻辑...
}

同时监听popstate事件处理浏览器原生返回：

window.addEventListener('popstate', (e) => {
  if (window.location.pathname.startsWith('/bill/')) {
    e.preventDefault();
    showPinModal().then((isValid) => {
      if (isValid) {
        window.history.back();
      } else {
        // 验证失败，重置历史栈（防止用户多次触发返回）
        window.history.pushState(null, null, window.location.href);
      }
    });
  }
});

拦截iPad手势返回 #

iOS的左滑手势返回可能绕过popstate，需要监听触摸事件拦截：

let touchStartX = 0;

window.addEventListener('touchstart', (e) => {
  touchStartX = e.changedTouches[0].screenX;
});

window.addEventListener('touchmove', (e) => {
  const touchCurrentX = e.changedTouches[0].screenX;
  // 检测左边缘向右滑动的返回手势
  if (touchStartX < 50 && touchCurrentX - touchStartX > 50 && window.location.pathname.startsWith('/bill/')) {
    e.preventDefault(); // 阻止默认手势
    showPinModal();
  }
}, { passive: false }); // 必须设置passive: false才能阻止默认行为

3. PIN验证组件实现 #

做一个全屏模态框，确保用户无法操作页面其他区域：

<!-- 模态框HTML -->
<div id="pin-modal" style="display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.8); z-index: 9999;">
  <div style="background: white; padding: 2rem; border-radius: 8px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);">
    <h3>请输入PIN码</h3>
    <input type="password" id="pin-input" placeholder="4位数字PIN">
    <p id="pin-error" style="color: red; display: none;">PIN码错误，请重试</p>
    <button id="pin-submit">确认</button>
  </div>
</div>

// 验证逻辑
async function validatePin(inputPin) {
  const storedHash = sessionStorage.getItem('protectedPinHash');
  if (!storedHash) return false; // 无PIN存储时直接放行（比如服务员刚登录还没设置）
  const inputHash = btoa(inputPin);
  return inputHash === storedHash;
}

// 显示模态框，返回验证结果Promise
function showPinModal() {
  return new Promise((resolve) => {
    const modal = document.getElementById('pin-modal');
    const input = document.getElementById('pin-input');
    const error = document.getElementById('pin-error');
    const submitBtn = document.getElementById('pin-submit');

    modal.style.display = 'block';
    input.value = '';
    error.style.display = 'none';
    document.body.style.overflow = 'hidden'; // 禁用页面滚动

    const handleSubmit = async () => {
      const isValid = await validatePin(input.value);
      if (isValid) {
        modal.style.display = 'none';
        document.body.style.overflow = 'auto';
        resolve(true);
      } else {
        error.style.display = 'block';
        input.focus();
      }
    };

    submitBtn.onclick = handleSubmit;
    input.addEventListener('keydown', (e) => {
      if (e.key === 'Enter') handleSubmit();
    });
  });
}

4. 适配iPad Safari的额外细节 #

• 启用PWA全屏模式：在manifest.json中设置display: standalone或fullscreen，让PWA以独立应用形式打开，减少浏览器默认导航元素：

  {
    "display": "standalone",
    "start_url": "/",
    // 其他manifest配置...
  }
  

• 隐藏自定义返回按钮：在账单页隐藏所有返回主页面的自定义按钮，只有PIN验证通过后才允许跳转。
• 会话结束清理：服务员下班时，清除sessionStorage中的PIN：

  function endServiceSession() {
    sessionStorage.removeItem('protectedPinHash');
    window.location.href = '/';
  }
  

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