切换页面后Firebase实时数据库写入权限丢失问题求助

Hey there! Let's break down why your Firebase auth state is disappearing when you navigate to myOtherPage.html and how to fix it.

核心原因 #

When you jump to a new page, the browser loads a fresh HTML document. Firebase has to re-initialize and fetch the user's auth state from local storage—this is an asynchronous process. If you try to write to the database immediately on page load before Firebase finishes restoring the user session, it'll treat the user as signed out, hence the permission denied errors.

Step-by-Step Fixes #

1. Ensure Firebase is properly initialized on every page

First, double-check that myOtherPage.html includes the exact same Firebase initialization code as myPage.html. This means copying over your Firebase config and the firebase.initializeApp(firebaseConfig) call. Without this, Firebase can't even access the auth session data.

2. Always wait for onAuthStateChanged before database operations

Just like you did on myPage.html, you need to wrap your database write logic inside the auth state listener on the new page. This ensures you only perform operations after Firebase confirms the user is signed in.

Here's an example for myOtherPage.html:

// Initialize Firebase first (use your actual config)
const firebaseConfig = {
  apiKey: "YOUR_API_KEY",
  authDomain: "YOUR_AUTH_DOMAIN",
  databaseURL: "YOUR_DB_URL",
  projectId: "YOUR_PROJECT_ID",
  storageBucket: "YOUR_STORAGE_BUCKET",
  messagingSenderId: "YOUR_SENDER_ID",
  appId: "YOUR_APP_ID"
};
firebase.initializeApp(firebaseConfig);

// Optional: Explicitly set persistence to LOCAL (default, but ensures consistency)
firebase.auth().setPersistence(firebase.auth.Auth.Persistence.LOCAL)
  .then(() => {
    // Listen for auth state changes
    firebase.auth().onAuthStateChanged(user => {
      if (user) {
        // User is signed in—safe to write to DB now
        console.log("User authenticated:", user.uid);
        
        // Example DB write operation
        firebase.database().ref(`users/${user.uid}/profile`)
          .update({ lastVisited: new Date().toISOString() })
          .then(() => console.log("Write successful!"))
          .catch(err => console.error("Write failed:", err));
      } else {
        // User is signed out—redirect to login or show error
        window.location.href = "login.html";
      }
    });
  })
  .catch(err => console.error("Failed to set persistence:", err));

3. Verify your Realtime Database security rules

Make sure your rules are set to only allow authenticated users to write data. A common rule set for user-specific data looks like this:

{
  "rules": {
    "users": {
      "$uid": {
        ".read": "$uid === auth.uid",
        ".write": "$uid === auth.uid"
      }
    }
  }
}

This ensures only the logged-in user can modify their own data, which aligns with your auth-based access model.

4. Avoid immediate DB calls outside the auth listener

Never run database operations directly on page load (e.g., in a window.onload handler without waiting for onAuthStateChanged). The auth state isn't available synchronously when the page first loads—you have to wait for Firebase's async callback.

Quick Recap #

• Initialize Firebase on every page that needs auth or DB access
• Wrap all DB operations inside onAuthStateChanged to confirm the user is signed in
• Confirm persistence is set to LOCAL (default, but explicit is safer)
• Check your security rules to match your auth requirements

That should fix the issue of losing auth state across page navigations!

内容的提问来源于stack exchange，提问作者Michel