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 about after guards? How do they work?

After guards are called after the navigation is confirmed. They can be used for actions like logging or analytics. Here's an example:

router.afterEach((to, from) => {
  console.log(`Navigated to: ${to.path}`);
});

This will log the path of the route the user navigated to.

Are there any other types of guards?

Yes, there are three main types of guards in Vue Router: global guards, route-specific guards, and in-component guards. Each serves different purposes depending on where you want to control access.