What are some examples of router guards in Vue 3?

What are some examples of router guards in Vue 3?

In Vue 3, router guards are functions that can be used to control access to routes. For example, you can use a global before guard to check if a user is authenticated before allowing them to access certain routes.

Can you show me a code example of a before guard?

Sure! Here's a simple example:

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

router.beforeEach((to, from, next) => {
  const isAuthenticated = false; // Replace with actual authentication check
  if (to.path === '/protected' && !isAuthenticated) {
    next({ path: '/home' }); // Redirect to home if not authenticated
  } else {
    next(); // Proceed to the route
  }
});

This code checks if the user is authenticated before accessing the '/protected' route.

What other types of guards are there?

In addition to beforeEach, there are beforeEnter guards that can be defined on specific routes, and afterEach hooks that run after navigation is complete. Each serves different purposes for route management.

How do I implement route-specific guards?

You can implement route-specific guards by adding a beforeEnter property to the route definition. Here's an example:

const routes = [
  {
    path: '/protected',
    component: Protected,
    beforeEnter: (to, from, next) => {
      const isAuthenticated = false; // Replace with actual check
      if (isAuthenticated) {
        next();
      } else {
        next({ path: '/home' });
      }
    }
  }
];