De alguna manera llegué al problema de pensar en cómo hacer que si la persona hace clic en un enlace, debería ser redirigido a la página de inicio de sesión si no está autorizado ya esa página si está autorizado. Esto suena fácil, pero el problema es que quiero hacer que si el usuario redirigió a una página donde debería estar autorizado, el usuario autorice y redirija a la misma página en la que hizo clic.
Por ahora, tengo una ruta protegida que se ve así: (Tengo el argumento fromPath para la próxima redirección, pero eso no funciona para mí).
const ProtectedRoute = ({ isAllowed, redirectPath = "/sign-in", fromPath = null, children, }) => { const dispatch = useDispatch(); if (fromPath) dispatch(setURLPath(fromPath)); if (!isAllowed) { return <Navigate to={fromPath} replace />; } return children ? children : <Outlet />; }; Y aquí cómo se ve desde el lado de App.js :
<Suspense fallback={<Spinner />}> <GlobalStyle /> <Routes> <Route path='/' element={ <ProtectedRoute isAllowed={roleLevel > 0} /> } > <Route path='bookings' element={<BookingsPage />} /> <Route path='single-booking/:id' element={<SingleBookingPage />} /> <Route path='documents' element={<DocumentsPage />} /> <Route path='my-account' element={<MyAccountPage />} /> <Route path='reservation' element={<ReservationPage />} /> </Route> </Route> <Route path='*' element={<NotFoundPage />} /> </Routes> </Suspense>El componente ProtectedRoute debe capturar el objeto de location actual para la ruta a la que se accede y pasarlo en estado de ruta a la ruta de inicio de sesión.
import { useLocation } from 'react-router-dom'; const ProtectedRoute = ({ isAllowed, redirectPath = "/sign-in", fromPath = null, children, }) => { const location = useLocation(); const dispatch = useDispatch(); if (fromPath) dispatch(setURLPath(fromPath)); if (!isAllowed) { return <Navigate to={fromPath} replace state={{ from: location }} />; } return children ? children : <Outlet />; };Luego, el componente de inicio de sesión debe acceder al estado de la ruta aprobada y redirigir de nuevo a la ruta original a la que se accede.
const location = useLocation(); const navigate = useNavigate(); ... const login = () => { ... const { from } = location.state || { from: { pathname: "/" } }; navigate(from, { replace: true }); };Puede lograr esto pasando algunos parámetros (next_route), por ejemplo. y mantenerlo durante el proceso de inicio de sesión para que cuando termine pueda ser redirigido al lugar correcto (next_route)