suchen

Heim  >  Fragen und Antworten  >  Hauptteil

Firebase-Authentifizierung. request.auth ist null, wenn die Seite aktualisiert wird

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粉693126115P粉693126115271 Tage vor456

Antworte allen(2)Ich werde antworten

  • P粉258788831

    P粉2587888312024-02-26 20:51:07

    我想你忘记了 readwrite 之间的逗号,应该看起来像 allow read, write: if isAuthenticated();

    Antwort
    0
  • P粉854119263

    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]);

    刷新后,它似乎保留了所有必要的身份验证信息来提取文档。

    Antwort
    0
  • StornierenAntwort