0

Hola tengo una consulta/problema, quiero proteger el acceso a través del navegador a una ruta en un proyecto react que contiene algo externo al proyecto pero que comparte la misma raiz de rutas, por ejemplo https://raiz/externo y https://raiz/react-app, lo que quiero es proteger desde react-app el acceso a externo si se llegase a escribir la ruta de externo y al ver que no esta autenticado redirija al login que esta en react-app, estoy usando react router v6 para las rutas, alguien sabe ¿como hacer esto? o ¿es posible hacer esto?

App.js

function App() {
    return (
      <div className="App">
        <AuthProvider>
          <Routes>
            <Route exact path="/" element={<Login />} />
            <Route path="/signUp" element={<Signup />} />
            <Route path="/recoverPassword" element={<PasswordRecovery />} />
            <Route path="/newPassword/:token" element={<PasswordChange />} />
            <Route
              path="/leaderboard"
              element={
                <PrivateRoute>
                  <Dashboard />
                </PrivateRoute>
              }
            />
          </Routes>
        </AuthProvider>
      </div>
    );
  } 

1 respuesta 1

0

tuve este mismo problema y lo resolví implementando rutas publicas y privadas, con componentes propios:

Basicamente dentro de la ruta privada hago la consulta al Backend para saber si el usuario esta autenticado, en caso de que si lo esté pues retorna el componente de la ruta, si no, lo va a mandar al login:

export const PrivateRoute = ({ children }) => {

    const dispatch = useDispatch();

    const [component, setComponent] = useState([]);
    
    useEffect(() => {
        isAuth().then( data => {
            if( data.isAuth ){
                dispatch(loginAction(data.usuario, data.permisos));
                setComponent( children );
            }
            else{
               setComponent( <Navigate to="/login" /> )
            }
        } );
    // eslint-disable-next-line react-hooks/exhaustive-deps
    }, [children, dispatch]);

    return component;    
}

y asi se ve la ruta privada implementada:

export const DashboardRouter = () => {
  return (
    <Routes >
      <Route
        path="/"
        element={
          <PrivateRoute >
            <DashboardView />
          </PrivateRoute>
        }
      />
      {/* Rutas generales */}
      <Route
        path="general/manuales"
        element={
          <PrivateRoute >
            <DashboardView content={<MenuGeneralManualesView />} />
          </PrivateRoute>}
      />
      <Route
        path="general/manuales/:tipoManual/:idArea"
        element={
          <PrivateRoute >
            <DashboardView content={<DetalleManualView />} />
          </PrivateRoute>}
      /> 
...

Tomé la idea de esta implementación que proporciona la documentación de React router: https://stackblitz.com/github/remix-run/react-router/tree/main/examples/auth?file=src/App.tsx

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.