退出 Firebase React 應用程序時出現“權限不足”錯誤

Question

我的項目在 React/Firebase 中。 我收到“onSnapshot 中未捕獲的錯誤：FirebaseError：缺少權限或權限不足”。 注銷時。 有讀/寫規則，所以我得到錯誤是有道理的。

我認為這與onSnapshot偵聽器如何分離有關，根據： 用戶注銷時的 Firebase 規則“缺少或不足的權限。 錯誤：缺少或不足的權限'

我不確定我在分離它們時做錯了什么——項目中有 6 個快照偵聽器，並且（我認為）我已將其范圍縮小到以下提供用戶信息的組件：

const UserProvider = props => {
  const [{ user }, setUser] = useState({ user: null });
  const unsubscribeRef = useRef(null);

  useEffect(() => {
    auth.onAuthStateChanged(async user => {
      if (user) {
        const userRef = await createUserProfileDocument(user);

        unsubscribeRef.current = userRef.onSnapshot(snapshot => {
          setUser({ user: { uid: snapshot.id, ...snapshot.data() } });
        });
      }
    });

    return () => unsubscribeRef.current();
  }, []);

  return (
    <UserContext.Provider value={user}>{props.children}</UserContext.Provider>
  );
};

以前，我只是將 unsubscribe 變量直接附加到userRef.onSnapshot位，但沒有運氣——這就是我在這里嘗試useRef的原因。 我想知道在調用signOut 時是否需要以某種方式附加這一點？ 似乎沒有其他 React/Firebase 應用程序示例使用它。 最后，我不明白為什么，但useEffect中的 return 語句似乎永遠無法到達這里。

如果有幫助，這是Authentication組件：

const Authentication = () => {
  const history = useHistory();

  useEffect(() => {
    auth.onAuthStateChanged(async userAuth => {
      if (userAuth) {
        if (history.location.pathname === ROUTES.SIGN_IN)
          history.push(ROUTES.HOME);
      } else {
        history.push(ROUTES.SIGN_IN);
      }
    });
  }, [history]);

  return null;
};

編輯：這些是 Firestore 中的規則：

match /databases/{database}/documents {
    match /{document=**} {
      allow read, write: if getUserData().admin == true;
    }

    function getUserData() {
      return get(/databases/$(database)/documents/users/$(request.auth.uid)).data
    }
  }

我不確定這里還有什么相關的。 注銷后，用戶將被路由回登錄頁面，該頁面不使用數據庫中的任何內容。

App() 的結構如下：

function App() {
  return (
    <UserProvider>
      <Router>
        <Authentication />
        <Switch>
          <Route path="/signin" component={SignIn} />
          <Route path="/forgot" component={ForgotPasswordView} />

          <CatalogProvider>
            <Route path="/" component={Main} />
          </CatalogProvider>
        </Switch>
      </Router>
    </UserProvider>
  );
}

並且 Main 包含應用程序工作部分的 rest。

Answer 1

要意識到的一件事是，當用戶注銷時， onAuthStateChanged會給您一個 null 用戶 object。 您的代碼似乎無法處理這種情況。

另一件需要意識到的事情是，當用戶退出時，如果查詢上的任何活動偵聽器由於安全規則而變得無效（例如，request.auth 變為空），那么偵聽器將因權限錯誤而被切斷。 您應該在退出之前刪除依賴於身份驗證的查詢的所有持久偵聽器，或者簡單地接受錯誤將發生並自動刪除偵聽器。