0
88
VisualizaçõesReaccionar protector de enrutador
Soy nuevo en reaccionar JS y aprender a reaccionar enrutador. Recientemente me quedé atascado en lo que estoy haciendo. Lo que estoy tratando de hacer es que no se pueda acceder a una ruta cuando el usuario no está o está autenticado.
- Cuando el usuario no está autenticado, solo debe poder acceder a /home y /login
- Cuando se autentican, solo pueden acceder a /profile , /settings y no pueden acceder a las otras rutas, ya sea usando el botón Atrás del navegador o cambiando la URL del navegador.
Lo que sucede es que todavía puedo acceder a todas las rutas, incluso si cambio el valor devuelto de isAuthenticated .
Estoy usando React 18.2.0 y React Router 6.
Abajo están mis códigos
Principal.tsx
import { Routes, Route } from 'react-router-dom' import HomePage from '@modules/home/views' import LoginPage from '@modules/login/views' import ProfilePage from '@modules/profile/views' import SettingsPage from '@modules/Settings/views' import { PublicRoutes, ProtectedRoutes } from 'src/middleware/AppRoutes' const AppMain = () => { return ( <main> <Routes> <Route element={<ProtectedRoutes />}> <Route path="/profile" element={<ProfilePage />} /> <Route path="/settings" element={<SettingsPage />} /> </Route> <Route element={<PublicRoutes />}> <Route path="/" element={<HomePage />} /> <Route path="/login" element={<LoginPage />} /> </Route> </Routes> </main> ) } export default AppMainRouteGuard.tsx
import { Navigate, Outlet, useLocation } from 'react-router-dom' export const isAuthenticated = () => { return false } export const PublicRoutes = () => { const location = useLocation() return !isAuthenticated() ? <Outlet /> : <Navigate to='/login' state={{ from: location }} replace /> } export const ProtectedRoutes = () => { const location = useLocation() return isAuthenticated() ? <Navigate to='/profile' state={{ from: location }} replace /> : <Outlet /> }1 Respostas
Responde à pergunta0
Has mezclado la condición de autenticación y el ternario.
Si el usuario está autenticado y accede a una ruta protegida, debe mostrar el Outlet , de lo contrario, redirigir a "/login" .
Si el usuario está autenticado y accede a una ruta pública, debe generar la redirección a "/profile" , de lo contrario, debe generar el Outlet .
Ejemplo:
const PublicRoutes = () => { const location = useLocation(); return isAuthenticated() ? ( <Navigate to="/profile" state={{ from: location }} replace /> ) : ( <Outlet /> ); }; const ProtectedRoutes = () => { const location = useLocation(); return isAuthenticated() ? ( <Outlet /> ) : ( <Navigate to="/login" state={{ from: location }} replace /> ); }; 