Heim > Fragen und Antworten > Hauptteil
Beim Aktualisieren der Seite scheint der Firebase-Client zu glauben, ich hätte einen authentifizierten Benutzer, aber die Firestore-Firebase-Regeln implizieren, dass ich keinen authentifizierten Benutzer habe.
Ich habe eine Firebase-App, bei der der Benutzer über die signInWithEmailAndPassword
使用电子邮件和密码登录。我将持久性设置为 browserLocalPersistence
。通常,当用户登录时,会使用经过身份验证的用户对象调用 onAuthStateChanged
方法,并且应用程序可以正常运行。当用户刷新页面时,我的 onAuthStateChanged
-Methode erneut mit einem Benutzer ungleich Null ausgelöst wird, aber aufgrund meiner Sicherheitsregeln schlagen alle Firebase-Abfragen fehl. Was mache ich da falsch?
Dies ist eine ReactJS-Anwendung. Bitte lassen Sie mich wissen, ob ich weitere Antworten geben kann, die Sie inspirieren könnten.
Meine Firebase-Regeln:
rules_version = '2'; service cloud.firestore { match /databases/{database}/documents { match /{document=**} { allow read, write: if isAuthenticated(); } function isAuthenticated() { return request.auth != null && request.auth.uid != null; } } }
Mein Login-Code:
setPersistence(sharedFirebaseAuth, browserLocalPersistence) .then(() => { signInWithEmailAndPassword(sharedFirebaseAuth, email, password) .then((userCredential) => { }) .catch((error) => { }); })
Mein onAuthStateChanged-Code
onAuthStateChanged(sharedFirebaseAuth, (user) => { if(user){ user.reload().then(()=>{ requestDocs(); }); } })
P粉2587888312024-02-26 20:51:07
我想你忘记了 read
和 write
之间的逗号,应该看起来像 allow read, write: if isAuthenticated();
P粉8541192632024-02-26 14:51:34
我最终不得不实现一个身份验证提供程序,以便它保留我的用户信息。
新文件 AuthContext.tsx
import React from "react" import { User } from "firebase/auth"; export const AuthContext = React.createContext(null)
新文件 AuthProvider.tsx
import { FC, useEffect, useState } from "react"; import { User } from "firebase/auth"; import { sharedFirebaseAuth } from "../Utils/SharedFirebase"; import { AuthContext } from "./AuthContext"; export interface AuthProviderProps { children: JSX.Element; } export const AuthProvider: FC= ({ children }: AuthProviderProps) => { const [user, setUser] = useState (null); useEffect(() => { const unsubscribe = sharedFirebaseAuth.onAuthStateChanged((firebaseUser) => { setUser(firebaseUser); }); return unsubscribe }, []); return ( {children} ); };
然后我像这样更新了我的index.tsx
import React from 'react'; import ReactDOM from 'react-dom/client'; import App from './App'; import { AuthProvider } from './provider/AuthProvider'; import "bootstrap/dist/css/bootstrap.min.css"; const root = ReactDOM.createRoot( document.getElementById('root') as HTMLElement ); root.render();
然后将我调用 onAuthStateChanged 的 app.tsx 部分更新为以下内容
const user = useContext(AuthContext); useEffect(() => { if(user){ requestDocs(); } },[user]);
刷新后,它似乎保留了所有必要的身份验证信息来提取文档。