How can I protect routes in Vue.js?

How can I protect routes in Vue.js?

You can protect routes in Vue.js by using navigation guards. These allow you to control access to certain routes based on user authentication.

Can you show me an example of using a navigation guard?

Sure! You can use the beforeEach guard in your router configuration. Here's a simple example:

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: '/profile', component: Profile, meta: { requiresAuth: true } },
  // other routes
];

Is there a way to redirect users after login?

Yes! You can store the intended route in local storage or a state management solution, then redirect them after successful login.