如何检测Refresh刷新

“检测 Refresh 刷新”在不同场景下含义不同。下面按常见使用场景分别说明，你可以对号入座：

一、Web 前端（浏览器刷新页面）

1. 检测用户是否刷新了页面（JS）

window.addEventListener('beforeunload', function () {
  // 用户刷新或关闭页面会触发
  console.log('页面即将刷新/关闭');
});

2. 区分“刷新”和“首次进入”

利用 performance.navigation（已逐步废弃）或 PerformanceNavigationTiming：

const navType = performance.getEntriesByType('navigation')[0]?.type;
if (navType === 'reload') {
  console.log('这是刷新');
} else if (navType === 'navigate') {
  console.log('首次访问');
}

3. 用 localStorage 判断是否刷新

if (localStorage.getItem('loaded')) {
  console.log('刷新页面');
} else {
  localStorage.setItem('loaded', '1');
  console.log('首次加载');
}

二、Vue / React 中检测刷新

Vue

onMounted(() => {
  if (performance.navigation.type === 1) {
    console.log('Vue 页面被刷新');
  }
});

React

useEffect(() => {
  if (window.performance) {
    if (performance.getEntriesByType('navigation')[0].type === 'reload') {
      console.log('React 刷新');
    }
  }
}, []);

三、后端检测刷新（HTTP 层）

1. 通过 Referer 判断

刷新时：

• Referer 通常是当前页面自身

2. 通过请求头

• Cache-Control: max-age=0
• Pragma: no-cache

3. 使用 Token / Session

后端记录：

• 首次访问生成 token
• 刷新时 token 仍存在 → 判定为刷新

四、移动端 / App 下拉刷新（Pull to Refresh）

原生 / 框架

• Android：SwipeRefreshLayout
• iOS：UIRefreshControl
• Flutter：RefreshIndicator

检测方式

监听刷新控件回调：

onRefresh: () async {
  print('检测到下拉刷新');
}

五、接口 / 服务层“Refresh Token”检测

如果是 Token 刷新：

• 检测 refresh_token 请求
• 判断是否调用 /auth/refresh

你可以告诉我：

• 是 网页刷新 还是 App 下拉刷新？
• 前端还是后端？
• 用什么技术栈（Vue / React / Java / Spring 等）？

我可以直接给你可运行的示例代码。