How do I implement router guards in Vue.js?

How do I implement router guards in Vue.js?

To implement router guards in Vue.js, you can use the beforeEach method in your router configuration. This allows you to define navigation guards that can control access to routes.

Can you give me an example of a simple authentication guard?

Sure! Here's a basic example:

const router = new VueRouter({
  routes: [
    { path: '/protected', component: ProtectedComponent, meta: { requiresAuth: true } },
    // other routes
  ]
});

router.beforeEach((to, from, next) => {
  const isAuthenticated = // your logic to check authentication;
  if (to.matched.some(record => record.meta.requiresAuth) && !isAuthenticated) {
    next({ path: '/login' });
  } else {
    next();
  }
});

What happens if the user is not authenticated?

If the user is not authenticated and tries to access a route that requires authentication, they will be redirected to the login page as specified in the next({ path: '/login' }) call.

Can I use multiple guards for different routes?

Yes, you can define multiple guards for different routes by using the beforeEnter guard on specific routes or by adding additional logic in the beforeEach method.