How can I protect routes in Vue.js using authentication?

How can I protect routes in Vue.js using authentication?

You can protect routes in Vue.js by using navigation guards. You can check if a user is authenticated before allowing access to certain routes.

Can you show me an example of how to implement a navigation guard?

Sure! You can create a global navigation guard in your router configuration like this:

router.beforeEach((to, from, next) => {
  const isAuthenticated = // your logic to check if user is authenticated;
  if (to.meta.requiresAuth && !isAuthenticated) {
    next({ name: 'Login' }); // redirect to login if not authenticated
  } else {
    next(); // proceed to the route
  }
});

What if I want to protect multiple routes?

You can add a meta field to your route definitions. For example:

const routes = [
  { path: '/dashboard', component: Dashboard, meta: { requiresAuth: true } },
  { path: '/login', component: Login }
];

Then, the navigation guard will check the requiresAuth property.

Is there a way to handle user roles for route protection?

Yes! You can extend your navigation guard to check user roles as well. Just add a role check in your guard logic.