Firebase 身份验证在页面刷新时消失

Question

我有一个使用 firebase 身份验证的简单反应应用程序。成功登录后，firebase:authUser存储在 localStorage 中。但在每个页面刷新时，本地存储都会被清除，并且会话会丢失。但浏览其他页面并不会清除 localStorage。

\n

代码如下：

\n

\n
1. 索引.js
\n

\n

import React from \'react\';\nimport ReactDOM from \'react-dom\';\nimport \'./index.css\';\nimport App from \'./App\';\nimport reportWebVitals from \'./reportWebVitals\';\n\nReactDOM.render(\n  <React.StrictMode>\n    <App />\n  </React.StrictMode>,\n  document.getElementById(\'root\')\n);\n\nreportWebVitals();\n

\n

\n
2. 应用程序.js
\n

\n

import { BrowserRouter as Router, Route, Routes } from "react-router-dom";\nimport Login from \'./Login\';\nimport Main from \'./Main\';\nimport Info from \'./Info\';\nimport \'./App.css\';\n\nfunction App() {\n  return (\n    <div className="App">\n        <Router>\n          <Routes>\n            <Route path="/login" element={<Login/>} />\n            <Route path="/" element={<Main/>} />\n            <Route path="/info" element={<Info/>} />\n          </Routes>\n        </Router>\n    </div>\n  );\n}\n\nexport default App;\n\n

\n

\n
3. Info.js \xe2\x86\x92 随机页面，无需身份验证即可查看。在此页面上刷新 (http://localhost:3000/info) 也会清除 localStorage
\n

\n

import { useNavigate } from "react-router-dom";\n\nfunction Info() {\n\n    const navigate = useNavigate();\n        return (\n            <div>\n                <div>\n                    Info page\n                </div>\n                <button\n                    onClick={() => {\n                            navigate(\'/\');\n                        }\n                    }>\n                        Go to Main\n                </button>\n            </div>\n        );\n}\n\nexport default Info;\n

\n

这是我用来验证用户身份的 firebase.js

\n

import { initializeApp } from \'firebase/app\';\nimport { getAuth, createUserWithEmailAndPassword, signInWithEmailAndPassword, signOut, setPersistence, browserLocalPersistence } from \'firebase/auth\';\n\nconst firebaseConfig = {\n  // Here is my config\n};\n\ninitializeApp(firebaseConfig);\n\n// Auth\nconst auth = getAuth();\nvar email;\nvar password;\n\n// Auth - set persistance\nsetPersistence(auth, browserLocalPersistence);\n\n// Auth - create\ncreateUserWithEmailAndPassword(auth, email, password)\n  .then((userCredential) => {\n    // Signed in \n    const user = userCredential.user;\n  })\n  .catch((error) => {\n    const errorCode = error.code;\n    const errorMessage = error.message;\n  });\n\n// Auth - Login\nsignInWithEmailAndPassword(auth, email, password)\n  .then((userCredential) => {\n    // Signed in \n    const user = userCredential.user;\n  })\n  .catch((error) => {\n    const errorCode = error.code;\n    const errorMessage = error.message;\n  });\n\n// Auth - signOut\nsignOut(auth).then(() => {\n  // Sign-out successful.\n}).catch((error) => {\n  // An error happened.\n});\n\nexport {\n  auth,\n  db,\n  createUserWithEmailAndPassword,\n  signInWithEmailAndPassword,\n  signOut\n};\n

\n

Answer 1

在大多数浏览器中，当您重新加载页面时，Firebase 默认情况下已从本地存储恢复用户身份验证状态。但由于这需要它调用服务器，因此在初始化当前用户之前可能需要一些时间，您应该使用所谓的身份验证状态侦听器，如获取当前用户的文档中的第一个代码示例所示：

import { getAuth, onAuthStateChanged } from "firebase/auth";

const auth = getAuth();
onAuthStateChanged(auth, (user) => {
  if (user) {
    // User is signed in, see docs for a list of available properties
    // https://firebase.google.com/docs/reference/js/firebase.User
    const uid = user.uid;
    // ...
  } else {
    // User is signed out
    // ...
  }
});

您的代码似乎只处理用户显式登录的情况，因此它永远不会选择恢复的用户。

如果上述方法有效，请检查您是否确实需要调用setPersistence(auth, browserLocalPersistence);. 如前所述，在浏览器上这应该已经是默认行为。