React应用中Firefox刷新时document.referrer异常问题求助

核心问题是document.referrer的浏览器行为不一致：Firefox刷新页面时会清空referrer，而Chrome/Edge会保留当前页面的referrer，导致你的判断逻辑失效。完全依赖referrer做登录状态校验本身就不可靠，换用以下方案：

方案1：用会话存储标记登录状态 #

这是最可靠的方式，直接基于用户的登录状态判断，而非来源页面：

1. 在登录成功后的loginpage.php中，添加会话存储标记：

   // 登录验证通过后执行
   echo "<script>sessionStorage.setItem('isLoggedIn', 'true');</script>";
   

2. 修改React App.js中的useEffect逻辑：

   import { useEffect } from 'react';
   
   function App() {
     useEffect(() => {
       // 优先读取登录状态标记，而非referrer
       const hasLoginFlag = sessionStorage.getItem('isLoggedIn');
       if (!hasLoginFlag) {
         window.location.replace('../loginpage.php');
       } else {
         console.log('user came through login');
       }
     }, []);
   
     // 其他组件逻辑...
     return <div>Your App Content</div>;
   }
   
   export default App;
   

3. 登出时清除标记：
   在你的登出功能中添加清除逻辑，避免用户登出后仍能访问页面：

   const handleLogout = () => {
     sessionStorage.removeItem('isLoggedIn');
     window.location.replace('../loginpage.php');
   };
   

为什么放弃document.referrer？ #

• 浏览器对referrer的处理没有统一标准，刷新、直接输入URL、书签打开等场景下，不同浏览器的返回值差异极大；
• referrer可以通过HTTP头或前端手段被篡改、清空，无法作为可靠的权限校验依据。

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