Parece un tema trivial.
Tengo una aplicación, donde la gente puede suscribirse a través de "stripe". Me gustaría dar acceso a algunas URL según la suscripción; de lo contrario, las llevaría de vuelta a la página de "perfil".
Un par de cosas no están funcionando.
La consulta de Firebase para obtener la suscripción no da resultados en la suscripción. De alguna manera, onSnapShot no obtiene nada. Probablemente porque el UID es nulo al comienzo de la representación de la página.
El operador condicional on no funciona. No estoy seguro de cuál es el problema en este.
function PaidRoutes(props) { const [subscription, setSubscription] = useState([]); const [loading, setLoading] = useState(false); useEffect(() => { const unsub = auth.onAuthStateChanged((authObject) => { unsub(); if (authObject) { setLoading(true); const uid = auth.currentUser?.uid; console.log('UID ==>', uid); let 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'); setLoading(false); } }); return () => { unsub(); }; }, []); return ( <Route {...props} render={(props) => subscription ? ( <Component {...props} /> ) : ( <Redirect to='/profileScreen' /> ) } /> );Gracias Drew por comentar. La versión instalada de react-router-dom es 5.2.0
Posibles problemas que veo en el código de PaidRoute :
loading es inicialmente false , por lo que cualquier verificación basada en él en el renderizado inicial no hará lo que desea. La loading tampoco se usa para retrasar la representación condicional.subscription es inicialmente una matriz vacía que aún es verdadera, por lo que la verificación lógica condicional probablemente permitirá el acceso a la ruta protegida de todos modos, independientemente de cualquier estado de autenticación.loading inicialmente verdadera para manejar el ciclo de renderizado inicial. Renderizar condicionalmente nulo o algún indicador de carga.subscription nulo.Código:
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' /> ); }