React Native PIN验证流程优化：避免重开时先显示Dashboard

以下是除加载器外的几种可行方案，核心思路都是让PIN验证逻辑优先于Dashboard的渲染执行：

1. 根组件/入口处的渲染拦截 #

直接在应用的根组件或入口文件中，先判断是否需要PIN验证，再决定渲染PIN界面还是主界面：

• 监听窗口的focus（恢复焦点）和blur（失去焦点/最小化）事件，记录最小化的时间点
• 应用恢复时，先计算最小化时长，若超过2分钟，直接渲染PIN组件，跳过Dashboard的渲染
• 验证通过后，再切换回主界面

示例（React）：

function App() {
  const [needsPinCheck, setNeedsPinCheck] = useState(false);

  useEffect(() => {
    const handleFocus = () => {
      const minimizeDuration = Date.now() - window.lastMinimizeTime;
      if (minimizeDuration > 120000) { // 2分钟阈值
        setNeedsPinCheck(true);
      }
    };

    const handleBlur = () => {
      window.lastMinimizeTime = Date.now();
      // 可选：存入本地存储，防止页面刷新后丢失记录
      sessionStorage.setItem('lastMinimizeTime', Date.now().toString());
    };

    // 初始化时也检查一次（应对页面刷新后直接进入的场景）
    const savedTime = sessionStorage.getItem('lastMinimizeTime');
    if (savedTime && Date.now() - parseInt(savedTime) > 120000) {
      setNeedsPinCheck(true);
    }

    window.addEventListener('focus', handleFocus);
    window.addEventListener('blur', handleBlur);
    return () => {
      window.removeEventListener('focus', handleFocus);
      window.removeEventListener('blur', handleBlur);
    };
  }, []);

  // 优先渲染PIN界面
  if (needsPinCheck) {
    return <PinVerification onSuccess={() => setNeedsPinCheck(false)} />;
  }

  return <Dashboard />;
}

2. 全局路由守卫拦截 #

如果使用路由框架（如React Router、Vue Router），可以通过全局路由守卫在跳转前拦截：

• 在路由跳转前，检查最小化时长是否超过阈值
• 若需要验证，直接跳转到PIN页面，同时记录原本要访问的路由路径
• PIN验证通过后，再跳转到原目标路由

示例（Vue）：

router.beforeEach((to, from, next) => {
  const lastMinimizeTime = localStorage.getItem('lastMinimizeTime');
  const now = Date.now();
  
  if (lastMinimizeTime && (now - parseInt(lastMinimizeTime)) > 120000) {
    // 跳转到PIN页面，携带原路由地址
    next({ name: 'PinVerification', query: { redirect: to.fullPath } });
  } else {
    next();
  }
});

// 监听窗口最小化事件，记录时间
window.addEventListener('blur', () => {
  localStorage.setItem('lastMinimizeTime', Date.now().toString());
});

// PIN验证成功后跳转回原路由
function onPinSuccess() {
  const redirectPath = this.$route.query.redirect || '/dashboard';
  this.$router.push(redirectPath);
}

3. 提前隐藏主界面容器 #

给Dashboard所在的容器添加默认隐藏的样式，仅在验证通过后才显示：

• 页面加载时，默认隐藏Dashboard容器，显示PIN容器（如果需要验证）
• 不需要验证时，直接显示Dashboard，隐藏PIN容器
• 这种方式避免了Dashboard的渲染闪烁，因为它从一开始就是隐藏状态

示例：

<!-- 页面结构 -->
<div id="dashboard" class="hidden">
  <!-- Dashboard内容 -->
</div>
<div id="pin-verification">
  <!-- PIN验证内容 -->
</div>

.hidden {
  visibility: hidden;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

let needsVerification = false;

window.addEventListener('focus', () => {
  const savedTime = localStorage.getItem('lastMinimizeTime');
  const duration = Date.now() - parseInt(savedTime);
  
  if (savedTime && duration > 120000) {
    needsVerification = true;
    document.getElementById('pin-verification').style.display = 'block';
    document.getElementById('dashboard').classList.add('hidden');
  } else {
    needsVerification = false;
    document.getElementById('pin-verification').style.display = 'none';
    document.getElementById('dashboard').classList.remove('hidden');
  }
});

// 验证成功后显示Dashboard
function onPinSuccess() {
  needsVerification = false;
  document.getElementById('pin-verification').style.display = 'none';
  document.getElementById('dashboard').classList.remove('hidden');
}

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