How do I implement redirects using router guards in Vue 3?

How do I implement redirects using router guards in Vue 3?

In Vue 3, you can use router guards to control navigation. You can implement redirects in the beforeEach guard.

Can you show me a code example of that?

Sure! Here's a simple example:

const router = createRouter({
  history: createWebHistory(),
  routes: [
    { path: '/login', component: Login },
    { path: '/dashboard', component: Dashboard, meta: { requiresAuth: true } },
  ]
});

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

This code checks if the route requires authentication and redirects to the login page if the user is not authenticated.

What if I want to redirect to a different page after login?

You can store the intended route in a variable before redirecting to the login page, then use it after successful login. For example:

let intendedRoute = null;

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

// After login, redirect to intended route
function onLoginSuccess() {
  router.push(intendedRoute || '/default');
}

Thanks! This is really helpful.