reactjs - 登录后立即缺少权限错误消息

Question

我有一个“Uncaught FirebaseError: Missing or insufficient permissions”。登录我的应用程序时出错。登录后立即出现重定向问题。我目前没有错误边界，因此 Web 控制台中会出现带有此错误消息的空白屏幕。

我使用的是 reactfire 库。

这里是一些代码:

我的入口点:(index.tsx)

createRoute(document.getElementById('root')!).render(
  <FirebaseAppProvider firebaseConfig={firebaseConfig}>
    <SuspenseWithPerf fallback={"Loading..."} traceId={'web-initial-loading'}>
      <Wrapper />
    </SuspenseWithPerf>
  </FirebaseAppProvider>
);

然后是根据身份验证重定向到登录或仪表板的包装器:

export const Wrapper = () => <AuthCheck fallback={<SignIn/>}><Dashboard/></AuthCheck>;

我的登录页面的重要部分是登录按钮:

<Button onClick={async () => auth.signInWithEmailAndPassword(email, password)}>
   Sign In
</Button>

当我点击按钮时，由于获取用户和验证密码等原因导致了一个小的延迟(我应该稍后在那里加载，但目前这不是问题)。然后页面变白并在控制台中显示错误。

导致错误的页面是仪表板页面。这是导致错误的代码:

const user = useUser<User>();
console.log('id', user.uid); // it is ok

const accountRef = useFirestore().collection('users').doc(user.uid);
const account = useFirestoreDocDataOnce<Account>(accountRef);
console.log('account', account); // it is also ok

const companyRef = useFirestore().collection('companies').doc(account.company);
const contractsCollectionRef = companyRef.collection('contracts');
const contracts = useFirestoreCollectionData<Contract>(contractsCollectionRef, { idField: 'id' });
console.log(contracts); // never shown

需要注意的重要一点是，如果我刷新页面，AuthCheck 会直接将我带到仪表板，一切都按预期工作。

您是否看到我也应该做些什么才能让它在我登录时正常工作？

它不适用于 reactfire 中的 useUser() 和 useAuth()。它也没有来自 firebase 的 auth()。

编辑作为临时补丁，我可以将登录按钮的 onClick 方法更改为:

() => auth.signInWithEmailAndPassword(email, password).then(() => window.location.reload())

速度足够快，刷新后一切正常。但我认为最好在不重新加载的情况下工作。

编辑 2使用 react-router lib 仍然存在同样的问题

索引.ts

<HashRouter>
   <AuthCheck fallback={<SignIn/>}>
       <Route path={'/dashboard'}>
           <Dashboard/>
       </Route>
   </AuthCheck>
</HashRouter>

SignIn.ts 按钮 onClick:

onClick={() => auth.signInWithEmailAndPassword(email, password).then(() => history.push('/dashboard'))}

Answer 1

这似乎是 reactfire 中的一个错误。参见 https://github.com/FirebaseExtended/reactfire/discussions/228 .

一个可能的 workaround那里提到建议在注销后立即调用以下函数:

export const clearFirestoreCache = () => {
  const map = globalThis['_reactFirePreloadedObservables'];
  Array.from(map.keys()).forEach(
    (key) => key.includes('firestore') && map.delete(key),
  );
};