Disculpa si la pregunta está mal formulada. Estoy trabajando con React.js y Parse Server en la escuela. El asunto es el siguiente:
Me gustaría tener rutas protegidas, solo para los usuarios que actualmente están conectados, y estoy tratando de hacerlo usando la .getSessionToken() Parse. Recupero el token con éxito, obtengo acceso a las rutas protegidas solo si estoy conectado, pero tan pronto como actualizo la página, la ruta vuelve a ser inaccesible porque el token está actualizado.
Tengo una solución que funciona, pero crea algunos problemas en este momento. El problema es que incluso si tengo acceso a la página, aparece el siguiente error en la consola: No routes matched location "/page1"
¿Tiene alguna idea de cómo puedo evitar que el token se actualice o alguna otra solución más elegante para este problema?
Mi código es el siguiente:
1. Al iniciar sesión, paso un setter usando useState() a través de accesorios, hasta App.js donde están las rutas. La única razón por la que configuro el token aquí es para navegar a la siguiente página que está protegida.
await Parse.User.logIn(username, password); const currentUser = Parse.User.current(); const currentToken = currentUser.getSessionToken(); setSessionToken(currentToken); navigate("/page1");2. Aquí, verifico si un usuario está actualmente en mi almacenamiento local y, en caso afirmativo, obtengo el token asociado con el usuario.
//sessionToken = the one I pass with props from step 1 const [sessionToken, setSessionToken] = useState(); //This makes sure that I get the token again and again if page is refreshed const [refreshedToken, setRefreshedToken] = useState(); const authenticateUser = async () => { if (Parse.User.current() !== null) { const token = Parse.User.current().getSessionToken(); setRefreshedToken(token); } }; useEffect(async () => { await authenticateUser(); }, []);3. Como ahora tengo 2 variables de estado, hago una representación condicional usando ambas.
<Route path="/login" element={<LoginPage setSessionToken={setSessionToken} />} /> {(sessionToken !== undefined || refreshedToken !== undefined) && ( <Fragment> <Route path="/page1" element={<Page1 />} /> <Route path="/page2" element={<Page2 />} /> <Route path="/page3" element={<Page3 />} />Creo que el problema aquí es que está intentando navegar a una ruta "/page1" antes de que el componente que representa las rutas sepa que debería representarlas, por lo tanto, el error No routes matched location "/page1" .
Es posible que desee crear un componente AuthWrapper que verifique el almacenamiento de la sesión y el token y represente un Outlet para las rutas anidadas que desea proteger; de lo contrario, redirigirá a los usuarios a otra página, es decir, a la página de inicio o al inicio de sesión.
import { Outlet, Navigate, useLocation } from 'react-router-dom'; const AuthWrapper = (props) => { const location = useLocation(); ... business logic to check sesstionStorage/token ... return (sessionToken !== undefined || refreshedToken !== undefined) ? <Outlet /> : <Navigate to="/login" replace state={{ from: location }} /> }; Ahora declare las rutas, envolviendo las rutas que desea proteger en el componente de diseño AuthWrapper .
<Route path="/login" element={<LoginPage setSessionToken={setSessionToken} />} /> <Route element={<AuthWrapper /* pass any session props here */ />}> <Route path="/page1" element={<Page1 />} /> <Route path="/page2" element={<Page2 />} /> <Route path="/page3" element={<Page3 />} /> </Route>