时间戳

首页 > 解决方案 > 登录后立即缺少权限错误消息

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

问题描述

我有一个“未捕获的 FirebaseError：缺少权限或权限不足”。当我登录我的应用程序时出错。登录后立即发生重定向问题。我目前没有错误边界，因此 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'))}

标签： reactjstypescriptfirebasefirebase-authenticationreactfire

解决方案

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

那里提到了一种可能的解决方法，建议在退出后立即调用以下函数：

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

推荐阅读