Issue(s)

我在PaidRoute代码中看到的潜在问题:

1. 在身份验证状态处理程序中调用unsubscribe函数，这可能会允许身份验证判断在初始身份验证更改时工作一次，但随后将取消订阅并停止工作，直到组件重新装载.
2. loading状态最初为false，因此在初始渲染中基于它的任何判断都不会执行您想要的操作.loading也不用于延迟条件渲染.
3. subscription状态最初是一个空数组，它仍然是真实的，因此条件逻辑判断它可能会允许访问受保护的路由，而不管任何身份验证状态.

Solution

1. 不要在回调中从auth change listener取消订阅.
2. 从loading initially true开始处理初始渲染周期.有条件地呈现null或某些加载指示符.
3. 从空subscription状态开始.

代码:

function PaidRoutes(props) {
  const [subscription, setSubscription] = useState(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    const unsubscribe = auth.onAuthStateChanged((authObject) => {
      if (authObject) {
        setLoading(true);
        const uid = auth.currentUser?.uid;
        console.log('UID ==>', uid);
        const docRef = query(collection(db, 'customers', uid, 'subscription'));
        console.log('DOC REF ==> ', docRef);
        onSnapshot(docRef, (snap) => {
          snap.forEach((doc) => {
            console.log('Role of Subscription', doc.data().role);
            setSubscription(doc.data().role);
          });
        });
      } else {
        console.log('not logged in');
        setSubscription(null); // <-- reset auth state
      }
      setLoading(false); // <-- clear loading state outside if-else
    });

    return unsubscribe;
  }, []);

  if (loading) {
    return null; // or loading indicator, spinner, etc...
  }

  return subscription ? (
    <Route {...props} />
  ) : (
    <Redirect to='/profileScreen' />
  );
}