Cómo proteger rutas con Vue Router
- En la mayoría de proyectos seguramente tendrás que proteger el acceso a algunas de las rutas con ciertos requisitos, es decir, exigir una autentificación por parte del usuario.
- A través de un middleware (es decir, algo que se interpone entre el origen y el destino de la navegación) con Vue Router puedes crear este tipo de protección de rutas y denegar el acceso o redirigir a otra ruta si así lo decides.
- Estos guardianes de ruta pueden ser ser globales, por ruta o incluso por componente.
- Vamos a examinar los guardianes de ruta a nivel global creando una supuesta área privada de usuario y un formulario para autentificarse. Sólo tras una autentificación correcta dejaremos que el usuario navegue a la ruta protegida. De lo contrario será redirigido a
login
. - Primero, creamos el nuevo estado, mutaciones y acciones en nuestra store Vuex.
state: {
...
username: null,
auth: null
},
mutations: {
...
doLogin(state, username) {
state.auth = true;
state.username = username;
},
doLogout(state) {
state.auth = false;
state.username = null;
}
},
actions: {
...
doLogin({ commit }, username) {
commit("doLogin", username);
},
doLogout({ commit }) {
commit("doLogout");
}
},
- Luego tenemos que crear esa área privada del usuario en
UserDashboard.vue
con su método para hacer logout conectando con Vuex.
...
methods: {
onLogout() {
this.$store.dispatch("doLogout");
this.$router.push("/");
}
}
- Ahora creamos la nueva vista
AppLogin.vue
con su formulario de autentificación conectado a un método que hace uso de la acción Vuex.
...
methods: {
async onSubmit() {
try {
await this.$store.dispatch("doLogin", this.username);
this.$router.push({ name: "Dashboard" });
} catch (error) {
console.error(error);
}
}
}
- No podemos olvidar añadir un punto en el menú principal que haga uso de la nueva sección Dashboard.
<router-link :to="{ name: 'Dashboard' }">Dashboard</router-link>
- Con todo listo nos queda ir a nuestro archivo de rutas en
router/index.js
y añadir la nueva ruta. Si te pregunta cómo haremos saber a Vue Router que esta nueva ruta debe de estar protegida de alguna forma la respuesta es metadatos. - Como ves podemos añadir metadatos (información extra) a cada una de las rutas a través de la propiedad
meta
. Esta propiedad luego es accesible en el proceso de navegación de una ruta a otra, por lo que se puede consultar y establecer así lógica de validación de usuario. - Nosotros usaremos la meta propiedad
requiresAuth
con valortrue
y también añadiremos la ruta para hacer login.
{
path: "/dashboard",
name: "Dashboard",
meta: {
requiresAuth: true
},
component: () =>
import(/* webpackChunkName: "Dashboard" */ "../views/UserDashboard")
},
{
path: "/login",
name: "Login",
component: () => import(/* webpackChunkName: "Login" */ "../views/AppLogin")
},
- Por último podemos utilizar
beforeEach
a nivel global para preguntar si el usuario está autentificado y dejarle acceder si lo está o moverlo a hacer login si no lo está.
router.beforeEach((to, from, next) => {
if (to.matched.some((record) => record.meta.requiresAuth)) {
if (store.state.auth) {
next();
} else {
next({ name: "Login" });
}
} else {
next();
}
});
- Como ves el callback
next
es imprescindible para completar la navegación. Podemos usarlo sin parámetros o bien indicándole dónde queremos navegar. - No sólo dispones del guard
beforeEach
sino que tienes acceso a otros puntos en el proceso de navegación. Como ves algunos son globales (como el que hemos usado) pero también existen por rutas o en los propios componentes.
El primer headless CMS tanto para desarrolladores como para marketers. Pruébalo gratis.

¿Tienes alguna pregunta sobre esta lección de Aprende a enrutar con Vue Router ?
Resuelve todas tus dudas sobre Vue Router en la Comunidad de Escuela Vue: un lugar donde participar, aprender y ayudar. ¡Te esperamos!.
Tras el registro (si no lo has hecho ya) serás redirigido/a al canal adecuado en la Comunidad.