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'),
},
...
]
}