Publicada:

Vue 3 + Pinia - Redirigir a la URL anterior después de iniciar sesión

En esta publicación, cubriremos cómo redirigir a un usuario a su URL/ruta solicitada originalmente después de iniciar sesión en una aplicación Vue 3 + Pinia. Esto se hace con la ayuda de Vue Router Navigation Guard y Pinia Auth Store.

El siguiente código es parte de un ejemplo de inicio de sesión de JWT más grande que publiqué recientemente, creé esta publicación separada para describir el comportamiento de redirección porque no pude encontrar muchas respuestas claras que muestren cómo impleméntelo en Vue 3. Para ver el tutorial completo y una demostración funcional del código, vaya a Vue 3 + Pinia - Tutorial y ejemplo de autenticación JWT.

 

Enrutador Vue 3 con protección de navegación

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.

Protección de navegación Vue

Navigation Guards en Vue 3 se utilizan para proteger rutas, se pueden implementar globalmente, en una sola ruta o dentro de un componente de Vue. Este ejemplo utiliza el gancho router.beforeEach() para registrar una protección de navegación global.

La función de protección comprueba si el usuario ha iniciado sesión comprobando si hay un objeto user actual en el almacén de autenticación de Pinia. Si no ha iniciado sesión, la función guarda la ruta solicitada (to.fullPath) en el almacén de autenticación de Pinia (auth.returnUrl) y redirige a la página de inicio de sesión devolviendo la ruta '/login'. Si ha iniciado sesión, la función de guardia no hace nada y se permite que la ruta continúe.

Para obtener más información sobre los protectores de navegación del enrutador Vue, consulte https://router.vuejs.org/guide/advanced/navigation-guards.html.

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';
    }
});
 

Almacén de autenticación de Pinia

Ruta: /src/stores/auth.store.js

El almacén de autenticación contiene el estado de Pinia y acciones para la autenticación. La propiedad de estado user contiene el usuario conectado actual, se inicializa con el objeto 'user' del almacenamiento local para permitir permanecer conectado entre actualizaciones de página y sesiones del navegador, o null si localStorage está vacío. El returnUrl se usa para redirigir al usuario a la URL anterior después de un inicio de sesión exitoso; el enrutador lo configura antes de redirigir a un usuario no autenticado. a la página de inicio de sesión.

El método de acción login() de Pinia publica las credenciales en la API; si tiene éxito, el objeto de usuario devuelto se almacena en el estado de Pinia y localStorage, y el enrutador redirige a la URL de retorno o a la página de inicio. Si falla, el método asíncrono arroja un error que se detecta y se muestra dentro del componente LoginView.

El método de acción logout() establece al usuario como nulo en el estado de Pinia, lo elimina del almacenamiento local y lo redirige a la página de inicio de sesión.

import { defineStore } from 'pinia';

import { fetchWrapper, router } from '@/helpers';

const baseUrl = `${import.meta.env.VITE_API_URL}/users`;

export const useAuthStore = defineStore({
    id: 'auth',
    state: () => ({
        // initialize state from local storage to enable user to stay logged in
        user: JSON.parse(localStorage.getItem('user')),
        returnUrl: null
    }),
    actions: {
        async login(username, password) {
            const user = await fetchWrapper.post(`${baseUrl}/authenticate`, { username, password });

            // update pinia state
            this.user = user;

            // store user details and jwt in local storage to keep user logged in between page refreshes
            localStorage.setItem('user', JSON.stringify(user));

            // redirect to previous url or default to home page
            router.push(this.returnUrl || '/');
        },
        logout() {
            this.user = null;
            localStorage.removeItem('user');
            router.push('/login');
        }
    }
});
 


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.