Basic Vue3 router middleware system

auth-middleware.js

// auth middleware
import { useAuthStore } from "@/stores/auth";

export default async function auth({ next }) {
  const authStore = useAuthStore();

  const user = await authStore.checkAuth();

  if (!( 'id' in user)) {
    console.log("Not logged in");
    return next({
      name: "Login",
    });
  }
  return next();
}

city-middleware.js

// hasCity middleware
import { useCitiesStore } from "@/stores/cities";

export default function hasCity({ next }) {
  const citiesStore = useCitiesStore()

  if (!citiesStore.city) {
    console.log('City not selected')
    return next({
      name: 'CitySelector'
    })
  }
  return next();
}

router.js

import auth from '@/middlewares/auth'
import hasCity from '@/middlewares/hasCity'

// other imports and code

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home,
    meta: {
      middleware: [auth, hasCity]
    }
  },
  {
    path: '/login',
    name: 'Login',
    component: Login,
  },
  {
    path: '/city-selector',
    name: 'CitySelector',
    component: CitySelector,
  }
];

const router = createRouter({
  routes,
});

function nextFactory(context, middlewares, index) {
  const nextMiddleware = middlewares[index];
  
  if (!nextMiddleware){
    return context.next;
  }
  const subsequentMiddleware = nextFactory(context, middlewares, index + 1);
  return nextMiddleware({ ...context, next: subsequentMiddleware })
}

router.beforeEach((to, from, next) => {
  if(!to.meta.middleware){
    return next();
  }

  const middlewares = Array.isArray(to.meta.middleware)
    ? to.meta.middleware
    : [to.meta.middleware];
  const context = {
    to,
    from,
    next,
    router,
  };

  return middlewares[0]({ ...context, next: nextFactory(context, middlewares, 1) });

});

export default router;

Copied from https://stackoverflow.com/questions/76063183/how-to-implement-multiple-middlewares-in-vue-js-3

existing fully-featured vue3 library implementation https://github.com/themustafaomar/vue-middleware