What are some examples of Vue Router guards?

What are some examples of Vue Router guards?

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

Can you give me a specific code example?

Sure! Here's a simple example of a beforeEach guard:

router.beforeEach((to, from, next) => {
  const isAuthenticated = false; // Replace with your auth logic
  if (to.meta.requiresAuth && !isAuthenticated) {
    next({ name: 'Login' }); // Redirect to login if not authenticated
  } else {
    next(); // Proceed to the route
  }
});

What about route-specific guards?

For route-specific guards, you can define them directly in the route definition:

const routes = [
  {
    path: '/protected',
    component: ProtectedComponent,
    beforeEnter: (to, from, next) => {
      const isAuthenticated = false; // Replace with your auth logic
      if (isAuthenticated) {
        next();
      } else {
        next({ name: 'Login' });
      }
    }
  }
];