How do I use middleware in Vue 3?

How do I use middleware in Vue 3?

In Vue 3, middleware can be used in conjunction with Vue Router to handle requests before they reach your components. You can define middleware functions that can check authentication, log requests, or perform other tasks.

Can you give me an example of a middleware function?

Sure! Here's a simple example of an authentication middleware:

function authMiddleware(to, from, next) {
  const isAuthenticated = // logic to check if user is authenticated;
  if (isAuthenticated) {
    next(); // proceed to the route
  } else {
    next('/login'); // redirect to login
  }
}

How do I apply this middleware to my routes?

You can apply the middleware in your router configuration like this:

const router = createRouter({
  history: createWebHistory(),
  routes: [
    {
      path: '/protected',
      component: ProtectedComponent,
      beforeEnter: authMiddleware
    },
    // other routes
  ]
});

What if I want to use multiple middleware functions?

You can chain multiple middleware functions by calling them in sequence within the beforeEnter property:

beforeEnter: (to, from, next) => {
  authMiddleware(to, from, (authResult) => {
    if (authResult) {
      anotherMiddleware(to, from, next);
    } else {
      next('/login');
    }
  });
}