Guards - Tylung/vue-apuntes GitHub Wiki

La protección de rutas nos ayuda a proteger las navegaciones del usuario y a redirigir o cancelar una navegación.

Exiten 2 tipos, el guard global, este se va a ejecutar en todas las rutas de la aplicación, el guard especifico, que solo se ejecuta en ciertas rutas en la aplicación

Guard Global

Archivo: src/router/router.js

Este Guard genera un numero al azar del 1 al 100 y si es menor a 50 bloquea la navegación del usuario, lo redirije a el '/pokemon/home', pero si es mayor a 50, lo deja pasar

Guard sincrono

router.beforeEach( (to, from, next ) => {
	console.log({to, from, next});

	const random = Math.random() * 100

	if ( random > 50 ){
		console.log('Autenticado');
		next()
	} else {
		console.log(random, ' Bloqueado por el beforeEach Guard');
		next({ name: 'pokemon-home' })
	}
})

• To: Es la ruta a la que quiere navegar el usuario
• From: Es la ruta de la que viene el usuario
• Next: Es una función que podemos llamar con algunos parámetros para poder navegar a cierto lugar

Guard Asincrono

const canAccess = () => {
	return new Promise( resolve => {

		const random = Math.random() * 100
		if ( random > 50 ){
			console.log('Autenticado- canAccess');
			resolve(true)
		} else {
			console.log(random, ' Bloqueado por el beforeEach Guard- canAccess');
			resolve(false)
		}
	})
}

router.beforeEach( async (to, from, next) => {

	const authorized = await canAccess()

	authorized 
		? next() 
		: next({ name: 'pokemon-home' })
})

Guard Específico

El router.js no debe de tener relleno que no sea necesario, por ello los guards pueden ser puestos en otra carpeta ya que es solo código de Js y exportarlos para ser usados en otros archivos

Archivo: src/router/auth-guard.js

const isAuthenticatedGuard = async ( to,from, next ) => {
    console.log({to,from, next});

    return new Promise( () => {

        const random = Math.random() * 100
        console.log(random);

        if ( random > 50 ){
            console.log('Esta Autenticado!')
            next()
        } else {
            console.log('Bloqueado por el isAuthenticatedGuard', random)
            next({ name: 'pokemon-home' })
        }
    })
}


export default isAuthenticatedGuard

Para ejecutar un guard en una ruta especifica, usamos la propiedad beforeEnter, que recibe un arreglo de los guards a ejecutar en esa ruta

Archivo: src/router/router.js

...
{
	path: '/dbz',
	name: 'dbz',
	beforeEnter: [isAuthenticatedGuard],
	component: () => import(/* webpackChunkName: "Dbz-root"*/ '@/modules/dbz/layouts/DragonBallLayout'),
	children: [
		{
			path: 'characters',
			name: 'dbz-characters',
			component: () => import(/* webpackChunkName: "Dbz-characters"*/ '@/modules/dbz/pages/Characters'),
		},
               ...
    ]
}