Implementing Vue Router Navigation Guards

// src/router/index.js
import { createRouter, createWebHistory } from 'vue-router';

const isAuthenticated = () => {
  // In a real app, check auth token, user session, etc.
  return localStorage.getItem('userToken') === 'someValidToken';
};

const router = createRouter({
  history: createWebHistory(),
  routes: [
    {
      path: '/',
      name: 'Home',
      component: () => import('../views/HomeView.vue')
    },
    {
      path: '/dashboard',
      name: 'Dashboard',
      component: () => import('../views/DashboardView.vue'),
      meta: { requiresAuth: true } // Custom meta field
    },
    {
      path: '/login',
      name: 'Login',
      component: () => import('../views/LoginView.vue')
    }
  ]
});

// Global navigation guard
router.beforeEach((to, from, next) => {
  if (to.meta.requiresAuth && !isAuthenticated()) {
    console.log('Access denied. Redirecting to login.');
    next({ name: 'Login' }); // Redirect to login page
  } else if (to.name === 'Login' && isAuthenticated()) {
    console.log('Already logged in. Redirecting to dashboard.');
    next({ name: 'Dashboard' }); // Already logged in, go to dashboard
  } else {
    next(); // Allow navigation
  }
});

export default router;

// In src/views/DashboardView.vue (Example of per-component guard)
<script setup>
import { onBeforeRouteLeave, onBeforeRouteUpdate } from 'vue-router';

onBeforeRouteLeave((to, from) => {
  const answer = window.confirm('Do you really want to leave? You have unsaved changes!');
  if (!answer) return false; // Prevent navigation
});

onBeforeRouteUpdate((to, from) => {
  // React to route params changes without re-creating component
  console.log('Route params updated:', to.params);
});
</script>