How do I implement authentication with Vue routing guards?

How do I implement authentication with Vue routing guards?

To implement authentication with Vue routing guards, you can use the beforeEach navigation guard to check if a user is authenticated before allowing access to certain routes.

Can you show me a code example of that?

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 if I want to redirect to a specific page after login?

You can pass a redirect query parameter to the login route and then use it to redirect the user after successful authentication.