How do I implement redirects using Vue 3 router guards?

How do I implement redirects using Vue 3 router guards?

You can use the beforeEach navigation guard in Vue Router to implement redirects. Here's a basic example.

Can you show me a code snippet for that?

Sure! Here's a simple code snippet:

const router = new VueRouter({
  routes: [
    { path: '/login', component: Login },
    { path: '/dashboard', component: Dashboard }
  ]
});

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

What if I want to redirect based on user roles?

You can modify the beforeEach guard to check the user's role and redirect accordingly. For example:

Can you provide an example for role-based redirection?

Absolutely! Here's how you can implement role-based redirection:

router.beforeEach((to, from, next) => {
  const userRole = 'user'; // Replace with your logic to get the user's role
  if (to.path === '/admin' && userRole !== 'admin') {
    next('/unauthorized'); // Redirect to unauthorized page
  } else {
    next();
  }
});