How do I implement navigation guards in Vue 3?

How do I implement navigation guards in Vue 3?

In Vue 3, you can implement navigation guards using the beforeEach method in your router configuration. Would you like a code example?

Yes, please provide a code example.

Sure! Here's a simple example:

const router = createRouter({
  history: createWebHistory(),
  routes: [
    { path: '/home', component: Home },
    { path: '/login', component: Login }
  ]
});

router.beforeEach((to, from, next) => {
  const isAuthenticated = false; // Replace with your auth logic
  if (to.path !== '/login' && !isAuthenticated) {
    next('/login');
  } else {
    next();
  }
});

This code checks if the user is authenticated before allowing access to certain routes.

What if I want to protect multiple routes?

You can use an array of protected routes and check if the to.path is included in that array. Here's an example:

const protectedRoutes = ['/home', '/dashboard'];

router.beforeEach((to, from, next) => {
  const isAuthenticated = false; // Replace with your auth logic
  if (protectedRoutes.includes(to.path) && !isAuthenticated) {
    next('/login');
  } else {
    next();
  }
});