How do I implement authentication redirects in Vue.js?

How do I implement authentication redirects in Vue.js?

To implement authentication redirects in Vue.js, you can use Vue Router's navigation guards. This allows you to check if a user is authenticated before accessing certain routes.

Can you show me a code example of how to set that up?

Sure! Here's a simple example:

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

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

This code checks if the route requires authentication and redirects to the login page if the user is not authenticated.

What if I want to redirect users after they log in?

You can redirect users after login by using the next function in your login method. For example:

login() {
  // perform login logic
  this.$router.push({ path: '/protected' });
}

Thanks! That really helps.