How do I implement authentication guards in Vue 3?

How do I implement authentication guards in Vue 3?

To implement authentication guards in Vue 3, you can use the beforeEach navigation guard in your router configuration.

Can you show me a code example?

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 = // your logic to check if user is authenticated;
  if (to.meta.requiresAuth && !isAuthenticated) {
    next('/login');
  } else {
    next();
  }
});

What if I want to protect multiple routes?

You can add the meta: { requiresAuth: true } property to any route you want to protect. Just ensure your guard checks this meta property.

Is there a way to redirect users after login?

Yes! After a successful login, you can redirect users to their intended route using next(to.fullPath).