Rutas Protegidas y Redirecciones en React con Autenticación

Clase 12 de 31 • Curso de React Avanzado

Resumen

¿Cómo crear un componente de perfil y protegerlo con rutas autenticadas?

Crear un componente de perfil y proteger su acceso mediante autenticación es esencial para aplicaciones que manejan información sensible y requieren seguridad y personalización. Aquí te mostraré cómo hacerlo paso a paso utilizando React.

¿Qué pasos se deben seguir para implementar rutas protegidas?

Creación de la ruta para el perfil: Inicia copiando una de las rutas existentes y cámbiala a /profile. Este será el punto de acceso para nuestro componente de perfil.

Creación de un componente de perfil: Simplifica la creación reutilizando componentes previos. Copia un componente similar y ajusta nombres y textos a Profile.

const Profile = () => {
    return (
        <div>
            <h1>This is the profile page of our application.</h1>
        </div>
    );
};

Importación del componente de perfil: Asegúrate de importar tu nuevo componente en la aplicación principal para evitar errores de referencia.
```
import Profile from './components/Profile';
```

Creación de un componente envolvente (Wrapper): Este componente evaluará si un usuario tiene acceso al perfil. Puedes comenzar duplicando el componente de perfil y ajustando el nombre a ProtectedRoute.

interface ProtectedRouteProps {
    isAuthenticated: boolean;
}

const ProtectedRoute: React.FC<ProtectedRouteProps> = ({ isAuthenticated, children }) => {
    if (!isAuthenticated) {
        return <Navigate to="/" replace />;
    }
    return <>{children}</>;
};

Uso del componente envolvente en la app: Envuelve el componente Profile con el componente ProtectedRoute y pasa las props necesarias para controlar el acceso.
```
<ProtectedRoute isAuthenticated={false}>
    <Profile />
</ProtectedRoute>
```

¿Cómo manejar redirecciones en caso de no autenticación?

Las redirecciones son vitales para gestionar el flujo de usuarios no autenticados. Utiliza Navigate de React Router DOM, así:

import { Navigate } from 'react-router-dom';

// En el componente
if (!isAuthenticated) {
    return <Navigate to="/" replace />;
}

Cuando isAuthenticated es falso, esta línea asegura que el usuario sea redirigido a la página de inicio o cualquier ruta que definas.

¿Cómo implementar una página de error para rutas no encontradas?

Para mejorar la experiencia del usuario, considera añadir un componente NotFound para aquellas rutas que no estén definidas:

Creación del componente NotFound: Similar al componente Profile, crea una vista simple que notifique al usuario de que la ruta solicitada no existe.

const NotFound = () => {
    return (
        <div>
            <h1>Page Not Found</h1>
        </div>
    );
};

Configuración de rutas para NotFound: Usa un asterisco (*) para detectar cualquier ruta desconocida y redirige a este componente.
```
<Route path="*" element={<NotFound />} />
```

Al implementar estas características, aumentas la seguridad y la usabilidad de tu aplicación, añadiendo capas de autenticación y mensajes claros para los usuarios finales. Experimenta aplicando estas prácticas en tus proyectos para robustecer su arquitectura y mejorar la experiencia del usuario.