Route Guards for Authentication in Vue.js 3 SPA
Using Vue Router's navigation guards to protect routes that require authentication, redirecting unauthenticated users to a login page.
import { createRouter, createWebHistory } from 'vue-router';
import Home from './components/Home.vue';
import Login from './components/Login.vue';
import Dashboard from './components/Dashboard.vue';
// Function to simulate checking if the user is authenticated
function isAuthenticated() {
// Here you would check the user's session
return localStorage.getItem('isAuthenticated') === 'true';
}
// Create a Vue Router instance
const router = createRouter({
history: createWebHistory(),
routes: [
{ path: '/', name: 'Home', component: Home },
{ path: '/login', name: 'Login', component: Login },
{
path: '/dashboard',
name: 'Dashboard',
component: Dashboard,
meta: { requiresAuth: true }
}
]
});
// Global before guard to check for authentication on routes that require it
router.beforeEach((to, from, next) => {
if (to.matched.some(record => record.meta.requiresAuth)) {
if (!isAuthenticated()) {
next({ name: 'Login' });
} else {
next();
}
} else {
next(); // ensure to always call next()! Otherwise the hook will not be resolved
}
});
export default router;
This code snippet defines a simple function 'isAuthenticated()' to simulate authentication check. It then creates a new Vue Router instance specifying routes, including a protected '/dashboard' route. A global navigation guard 'beforeEach' is added to the router to intercept navigation to routes that require authentication. If the user attempts to navigate to a guarded route and is not authenticated, they are redirected to the '/login' route.