即使不尝试访问数据，Firestore 应用程序也会丢失或权限不足

Question

我一直在关注 Youtube 上的演示视频，用于学习 Firebase 身份验证，它也使用 firestore 作为数据库。我对我的进行了一些修改，以在用户登录时显示食谱列表，并且只允许用户在登录后创建新食谱。我隐藏创建按钮和现有食谱列表（如果已登录） out，他们在注销时看到的只是一条登录消息。我还修改了 firestore 中的规则，只允许在有用户登录时访问数据。

service cloud.firestore {
    match /databases/{database}/documents {
        match /{document=**} {
            allow read, write: if request.auth != null;
        }
    }
}

这只是他们文档中提供的基本代码。在我尝试通过开发工具显示按钮注销并尝试提交新配方以测试规则并确保它不允许这样做之前，它一直运行良好，直到我尝试在注销时创建配方。现在，除非我删除 firestore 中的规则，否则页面在完全加载之前会出错。如果我允许访问，一切都会按预期工作。

const app = initializeApp(firebaseConfig);
const auth = getAuth(app);
const db = getFirestore(app);
const querySnapshot = await getDocs(collection(db, "Recipes"));
//listen for auth status
onAuthStateChanged(auth, (user) => {
  console.log(user);
  if (user) {
    setupRecipes(querySnapshot);
    setupUI(user);
  } else {
    setupRecipes([]);
    setupUI();
  }
});

const recipeList = document.querySelector(".recipes");
const loggedOutLinks = document.querySelectorAll(".logged-out");
const loggedInLinks = document.querySelectorAll(".logged-in");

const setupUI = (user) => {
  if (user) {
    loggedInLinks.forEach((item) => (item.style.display = "block"));
    loggedOutLinks.forEach((item) => (item.style.display = "none"));
  } else {
    loggedInLinks.forEach((item) => (item.style.display = "none"));
    loggedOutLinks.forEach((item) => (item.style.display = "block"));
  }
};

const setupRecipes = (data) => {
  let html = "";
  let ingredientList = "";
  data.forEach((doc) => {
    const recipe = doc.data();
    ingredientList = "";
    recipe.ingredients.forEach((ingredient) => {
      ingredientList += `<li>${ingredient}</li>`;
    });
    const li = `
      <li>
        <div class="collapsible-header grey lighten-4">${recipe.title}</div>
        <div class="collapsible-body white">
          <h4 style="margin: 0 0 10px 0;">Ingredients</h4>
          <ul class="ingredientList">
            ${ingredientList}
          </ul>
        </div>
      </li>
    `;
    html += li;
  });
  if (html.length !== 0) {
    recipeList.innerHTML = html;
  } else {
    recipeList.innerHTML =
      '<h4 class="center-align">Login to view recipes</h4>';
  }
};

所以我想我的问题是：那个糟糕的请求是以某种方式保留的，还是我试图在不知不觉中访问某处的数据？我已经尝试清除我的缓存并重新启动我有应用程序运行的本地服务器，但是让页面加载并显示告诉用户登录的消息的唯一方法是取消 firestore 中的规则并允许所有人访问。当规则存在时，我在页面加载时立即得到以下信息：127.0.0.1/:1 Uncaught FirebaseError: Missing or insufficient permissions。任何帮助将不胜感激，如果需要，我很乐意提供更多代码。

Answer 1

正如上面的评论中所指出的，在用户登录之前发生了对数据库的查询。我将 getDocs 调用移到了 onAuthStateChanged 函数中，并且仅在用户存在时调用它，现在允许注销时加载页面，因为除非授权用户登录，否则不会尝试检索任何内容

const app = initializeApp(firebaseConfig);
const auth = getAuth(app);
const db = getFirestore(app);

//listen for auth status
onAuthStateChanged(auth, async(user) => {
  console.log(user);
  if (user) {
    const querySnapshot = await getDocs(collection(db, "Recipes"));
    setupRecipes(querySnapshot);
    setupUI(user);
  } else {
    setupRecipes([]);
    setupUI();
  }
});

即使不尝试访问数据，Firestore 应用程序也会丢失或权限不足

Firestore app gets missing or insufficient permissions even when not trying to access the data

javascript

firebase-security

reactjs

firebase-authentication

google-cloud-firestore