Pengesahan Firebase. request.auth adalah batal apabila halaman dimuat semula

Question

Apabila memuat semula halaman, pelanggan Firebase nampaknya menyangka saya mempunyai pengguna yang disahkan, tetapi peraturan firestore firebase membayangkan bahawa saya tidak mempunyai pengguna yang disahkan.

Saya mempunyai apl Firebase di mana pengguna melalui kaedah signInWithEmailAndPassword 使用电子邮件和密码登录。我将持久性设置为 browserLocalPersistence。通常，当用户登录时，会使用经过身份验证的用户对象调用 onAuthStateChanged 方法，并且应用程序可以正常运行。当用户刷新页面时，我的 onAuthStateChanged dicetuskan semula dengan pengguna bukan nol, tetapi disebabkan peraturan keselamatan saya, semua pertanyaan Firebase gagal. Apa salah saya di sana.

Ini adalah aplikasi reactjs. Sila beritahu saya jika saya boleh memberikan sebarang jawapan lain yang mungkin memberi inspirasi kepada anda.

Peraturan firebase saya:

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;
    }
  }
  
}

Kod log masuk saya:

setPersistence(sharedFirebaseAuth, browserLocalPersistence)
    .then(() => {
        signInWithEmailAndPassword(sharedFirebaseAuth, email, password)
            .then((userCredential) => {
            })
            .catch((error) => {
            });
})

Kod onAuthStateChanged saya

onAuthStateChanged(sharedFirebaseAuth, (user) => {
  if(user){
    user.reload().then(()=>{
      requestDocs();
    });
  }
})

Answer 1

Saya rasa awak terlupa read 和 write 之间的逗号，应该看起来像 allow read, write: if isAuthenticated();

Answer 2

Saya akhirnya terpaksa melaksanakan pembekal pengesahan supaya ia mengekalkan maklumat pengguna saya.

Fail baharu AuthContext.tsx

import React from "react"
import { User } from "firebase/auth";

export const AuthContext = React.createContext(null)

Fail baharu 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}
  );
};

Kemudian saya mengemas kini index.tsx saya seperti ini

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

Kemudian kemas kini bahagian app.tsx tempat saya memanggil onAuthStateChanged kepada yang berikut

const user = useContext(AuthContext);

    useEffect(() => {
        if(user){
            requestDocs();
        }
    },[user]);

Selepas menyegarkan, ia nampaknya mengekalkan semua maklumat pengesahan yang diperlukan untuk mengekstrak dokumen.