Exploring the Functionality of Using Multiple Middlewares in Vue.js 3

Question

Exploring the Functionality of Using Multiple Middlewares in Vue.js 3

For my web app project using vue.js 3 and vue-router, I followed a helpful tutorial on implementing middleware pipelines. The tutorial can be found at: https://blog.logrocket.com/vue-middleware-pipelines/. This tutorial demonstrated creating middleware to prevent unauthorized access, as well as using multiple middleware for a single route structure like this:

children: [{
                path: '/dashboard/movies',
                name: 'dashboard.movies',
                component: Movies,
                meta: {
                    middleware: [
                        auth,
                        isSubscribed
                    ]
                }
            }],

In the tutorial, each middleware function calls the "next()" function once, but what if you need to call it multiple times for different purposes? Vue.js 3 documentation suggests using the "next()" function only once. How can we effectively implement multiple middlewares in vue.js 3 similar to the approach shown in the aforementioned tutorial?

javascript vue.js

Answer 1

Answer №1

If you're facing challenges with implementing middlewares in Vue3, here is an approach that might help:

// authentication 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();
}

Another middleware example:

// city selection 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();
}

Incorporating the middlewares within the router:

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

// other imports and code

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

const router = createRouter({
  routes,
});

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

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

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

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

});

export default router;

Answer 2

If you're facing challenges with implementing middlewares in Vue3, here is an approach that might help:

// authentication 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();
}

Another middleware example:

// city selection 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();
}

Incorporating the middlewares within the router:

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

// other imports and code

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

const router = createRouter({
  routes,
});

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

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

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

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

});

export default router;

Answer 3

Answer №2

If you're looking for a seamless implementation without the need for configuration, consider using vue-middleware.

Check it out on Github: https://github.com/themustafaomar/vue-middleware

Explore the documentation here:

Here's an example of how it can be used:

{
  name: 'dashboard',
  path: '/dashboard',
  component: () => import('@/layouts/dashboard.vue'),
  meta: {
    middleware: 'dashboard',
    // or using array syntax..
    middleware: ['dashboard', 'logger'],
  },
}

Answer 4

If you're looking for a seamless implementation without the need for configuration, consider using vue-middleware.

Check it out on Github: https://github.com/themustafaomar/vue-middleware

Explore the documentation here:

Here's an example of how it can be used:

{
  name: 'dashboard',
  path: '/dashboard',
  component: () => import('@/layouts/dashboard.vue'),
  meta: {
    middleware: 'dashboard',
    // or using array syntax..
    middleware: ['dashboard', 'logger'],
  },
}

Exploring the Functionality of Using Multiple Middlewares in Vue.js 3

Answer №1

Answer №2

Similar questions

Features of ES2015's [[class]] attribute

Ensure the div element remains fixed at the top of the page

Using Vuetify to populate a selection menu with options from a JSON array containing objects

Unfortunately, the datepicker feature does not seem to work properly on elements that have been dynamically added through the

An easy guide to rerouting a 404 path back to the Home page using Vue Router in Vue.js 3

Include form data into an array of objects within an Angular data source

Are there options available in nightwatchjs for making intricate decisions with selectors?

Creating an AJAX XML tree without the need for a backend server language

Ensure to trigger the Ajax function prior to the tab change event in a Vue form wizard

VueJS Vuetify automatically centers default content

What could be causing the recurring appearance of the success alert message in an AJAX call to a PHP script in this particular situation?

Utilizing Facebook's JavaScript SDK to transmit variables to PHP using ajax

Ways to reposition arrows upwards in Vuetify carousel

What is the best way to send information from App.js to components?

Trouble uploading an audio blob as a base64 string using Google Drive API with the drive.files.create method - File ID could not be located

Adjust the active carousel item to 0 within onsen-ui (displaying a list of carousel items in a sliding menu)

How can I utilize jQuery to iterate through every anchor tag on an HTML page?

Writing TypeScript, Vue, and playing around with experimental decorators

retrieveValue() for SelectionDropdown

Obtaining objects from a Meteor collection on the server triggers a "Must have Fiber to proceed" error