Firebase 身份驗證。頁面刷新時 request.auth 為 null

Question

在刷新頁面時，客戶端 Firebase 似乎認為我有經過身份驗證的用戶，但 firestore firebase 規則暗示我沒有經過身份驗證的用戶。

我有一個 Firebase 應用程序，用戶透過 signInWithEmailAndPassword 使用電子郵件和密碼登入。我將持久性設定為 browserLocalPersistence。通常，當使用者登入時，會使用經過驗證的使用者物件呼叫 onAuthStateChanged 方法，且應用程式可以正常運作。當使用者重新整理頁面時，我的 onAuthStateChanged 方法會再次使用非空白使用者觸發，但由於我的安全性規則，所有 Firebase 查詢都會失敗。我在那裡做錯了什麼。

這是一個reactjs應用程式。如果我可以提供任何其他可能會給您帶來啟發的答案，請告訴我。

我的 firebase 規則：

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

我的登入程式碼：

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

我的 onAuthStateChanged 程式碼

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

Answer 1

我想你忘了read 和write 之間的逗號，應該看起來像allow read, write: if isAuthenticated();

Answer 2

我最終不得不實現一個身份驗證提供程序，以便它保留我的用戶資訊。

新檔案 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]);

刷新後，它似乎保留了所有必要的身份驗證資訊來提取文件。 ###