How do I set up router guards in Vue.js?

How do I set up router guards in Vue.js?

To set up 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 how to implement 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 = false; // Replace with your auth logic
  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 add a loading spinner while the guard checks?

You can manage a loading state in your component. Set a loading flag to true before the guard checks and set it to false after the check is complete. Here's a simple way to do it:

let isLoading = true;
router.beforeEach((to, from, next) => {
  isLoading = true;
  const isAuthenticated = false; // Your auth logic
  if (to.matched.some(record => record.meta.requiresAuth) && !isAuthenticated) {
    next({ path: '/login' });
  } else {
    next();
  }
  isLoading = false;
});

You can then use isLoading in your component to show or hide the spinner.