Publicada:

Vue 3 - Redirigir a la página de inicio de sesión si no está autenticado

Tutorial creado con Vue 3.2.33 y Vue Router 4.0.15

Esta es una publicación rápida para mostrar cómo redirigir a los usuarios a la página de inicio de sesión en una aplicación Vue 3 que usa Vue Router. La redirección se aplica a los usuarios que intentan acceder a una página segura/restringida cuando no han iniciado sesión.

Los archivos de código a continuación son parte de un tutorial de autenticación de Vue 3 JWT que publiqué recientemente que incluye una demostración en vivo, así que para ver el código en ejecución, consulte Vue 3 + Pinia - Tutorial y ejemplo de autenticación JWT.

 

Enrutador Vue 3

Ruta: /src/helpers/router.js

El enrutador define las rutas para la aplicación Vue 3 y crea una nueva instancia de Vue Router con la función createRouter(). La instancia de router exportada se importa a main.js donde se pasa a la aplicación Vue al inicio.

La función createRouter() es parte de Vue Router v4, que es compatible con Vue 3, la versión anterior del enrutador (Vue Router v3) es compatible con Vue 2. Para obtener más información sobre qué y #39; ha cambiado en la nueva versión del enrutador Vue, consulte https://next.router.vuejs.org/guide/migration/.

La ruta principal asigna la ruta raíz ('/') de la aplicación al componente HomeView y al componente '/login' mapas de ruta al componente LoginView.

Redirigir para iniciar sesión desde el enrutador beforeEach()

La función que se pasa a router.beforeEach() impide que los usuarios no autenticados accedan a páginas restringidas. Si el usuario no ha iniciado sesión e intenta acceder a una página segura, la función devuelve la cadena '/login' para redirigirlo a la página de inicio de sesión. La ruta solicitada (to.fullPath) se asigna a la propiedad del almacén de autenticación de Pinia auth.returnUrl para que la página de inicio de sesión pueda redirigir al usuario a la página deseada después de iniciar sesión correctamente.

Para obtener más información sobre el enrutamiento de Vue, consulte https://router.vuejs.org/.

import { createRouter, createWebHistory } from 'vue-router';

import { useAuthStore } from '@/stores';
import { HomeView, LoginView } from '@/views';

export const router = createRouter({
    history: createWebHistory(import.meta.env.BASE_URL),
    linkActiveClass: 'active',
    routes: [
        { path: '/', component: HomeView },
        { path: '/login', component: LoginView }
    ]
});

router.beforeEach(async (to) => {
    // redirect to login page if not logged in and trying to access a restricted page
    const publicPages = ['/login'];
    const authRequired = !publicPages.includes(to.path);
    const auth = useAuthStore();

    if (authRequired && !auth.user) {
        auth.returnUrl = to.fullPath;
        return '/login';
    }
});
 

Vue 3 Main.js

Ruta: /src/main.js

El archivo main.js arranca la aplicación Vue montando el componente App en el elemento div #app definido en el archivo index.html principal.

Las rutas de Vue se configuran con la llamada a app.use(router), las rutas se definen en router.js.

La compatibilidad con Pinia se agrega a la aplicación Vue con la línea app.use(createPinia()).

import { createApp } from 'vue';
import { createPinia } from 'pinia';

import App from './App.vue';
import { router } from './helpers';

// setup fake backend
import { fakeBackend } from './helpers';
fakeBackend();

const app = createApp(App);

app.use(createPinia());
app.use(router);

app.mount('#app');
 

Componente de la aplicación Vue 3

Ruta: /src/App.vue

El componente App es el componente raíz de la aplicación de ejemplo Vue 3 + Pinia, contiene la barra de navegación principal que solo se muestra para usuarios autenticados y un RouterView componente para mostrar el contenido de cada vista en función de la ruta/camino actual.

La propiedad de estado user de la tienda Pinia auth se utiliza para mostrar/ocultar de forma reactiva la barra de navegación principal cuando el usuario inicia/cierra sesión en la aplicación.

El método authStore.logout() se llama desde el enlace de cierre de sesión en la barra de navegación principal para cerrar la sesión del usuario y redirigirlo a la página de inicio de sesión.

<script setup>
import { RouterLink, RouterView } from 'vue-router';

import { useAuthStore } from '@/stores';

const authStore = useAuthStore();
</script>

<template>
    <div class="app-container bg-light">
        <nav v-show="authStore.user" class="navbar navbar-expand navbar-dark bg-dark">
            <div class="navbar-nav">
                <RouterLink to="/" class="nav-item nav-link">Home</RouterLink>
                <a @click="authStore.logout()" class="nav-item nav-link">Logout</a>
            </div>
        </nav>
        <div class="container pt-4 pb-4">
            <RouterView />
        </div>
    </div>
</template>

<style>
@import '@/assets/base.css';
</style>

 


Suscríbete o Sígueme para actualizaciones

Suscríbete a mi canal de YouTube o sígueme en Twitter, Facebook o GitHub para recibir notificaciones cuando publique contenido nuevo.

Aparte de la codificación...

Actualmente estoy intentando viajar por Australia en motocicleta con mi esposa Tina en un par de Royal Enfield Himalayan. Puedes seguir nuestras aventuras en YouTube, Instagram y Facebook.


¿Necesita Ayuda Vue 3?

Buscar fiverr para encontrar ayuda rápidamente de desarrolladores Vue 3 experimentados.