Middleware de Autenticación

Configuración

El middleware de autenticación ayuda a gestionar el acceso a las rutas de tu aplicación según el estado de autenticación del usuario. A continuación, se detalla cómo implementar un middleware global en tu nuevo módulo para asegurar que solo los usuarios autenticados puedan acceder a ciertas rutas.

Creación del Middleware

Crea un archivo llamado auth.global.ts en el directorio middleware de tu proyecto.

// middleware/auth.global.ts
 // middleware/auth.global.ts
 export default defineNuxtRouteMiddleware(async (to, from) => {
     const { $userStore } = useNuxtApp()

     // Verifica si el usuario está intentando acceder a la página de inicio de sesión
     const isLoginPage = to.path === "/login"

     if ($userStore.isLoggedIn) {
         // Si está autenticado y tratando de acceder a la página de inicio de sesión, redirige a la página principal
         if (isLoginPage) {
             return navigateTo('/')
         }
         // Si está autenticado y accediendo a cualquier otra página, permite el acceso
         return
     } else {
         // Si no está autenticado y tratando de acceder a cualquier página que no sea la de inicio de sesión, redirige a la página de inicio de sesión
         if (!isLoginPage) {
             return navigateTo('/login')
         }
         // Si no está autenticado y accediendo a la página de inicio de sesión, permite el acceso
         return
     }
 })

Explicación del Middleware

Importación del Store de Usuario

const { $userStore } = useNuxtApp()

Se accede al store de usuario mediante useNuxtApp(), que proporciona acceso al estado global de la aplicación.

Verificación de Ruta

const isLoginPage = to.path === "/login"

Se verifica si la ruta de destino es la página de inicio de sesión (/login).

Redirección Basada en el Estado de Autenticación

if ($userStore.isLoggedIn) {
    // Si está autenticado
    if (isLoginPage) {
        return navigateTo('/')
    }
    return
} else {
    // Si no está autenticado
    if (!isLoginPage) {
        return navigateTo('/login')
    }
    return
}

• Usuario Autenticado:
• Si el usuario está autenticado y trata de acceder a la página de inicio de sesión, se redirige a la página principal (/).
• Si está autenticado y accede a cualquier otra página, se permite el acceso.
• Usuario No Autenticado:
• Si el usuario no está autenticado y trata de acceder a cualquier página que no sea la de inicio de sesión, se redirige a la página de inicio de sesión (/login).
• Si no está autenticado y accede a la página de inicio de sesión, se permite el acceso.

Comportamiento

• Acceso Restringido: El middleware garantiza que los usuarios no autenticados sean redirigidos a la página de inicio de sesión si intentan acceder a rutas protegidas. Los usuarios autenticados son redirigidos a la página principal si intentan acceder a la página de inicio de sesión.
• Excepciones: La página de inicio de sesión (/login) es accesible para usuarios no autenticados, mientras que los usuarios autenticados no tienen acceso a esta página y son redirigidos automáticamente a la página principal.

Este middleware proporciona una forma efectiva de gestionar el acceso a las rutas en función del estado de autenticación del usuario, mejorando la seguridad y la experiencia del usuario en tu aplicación.