Pengesahan Firebase. request.auth adalah batal apabila halaman dimuat semula
P粉693126115
P粉693126115 2024-02-25 21:55:56
0
2
464

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

P粉693126115
P粉693126115

membalas semua(2)
P粉258788831

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

P粉854119263

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.

Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan