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

Incorporating Card Layouts with SwiperJS

How come I am receiving a null value for isMatch from bcrypt compare even though the two password strings match exactly?

Running JavaScript code without blocking the main thread

resolving conflicts between Rails and JavaScript assets

Select information from an array and store it within an object

Start CSS3 Animation Automatically

Is it possible to initially design a login page using HTML/CSS and JavaScript, and then integrate VUE into it?

Encountered an issue with accessing the property 'path' of undefined in nodejs

What is the best way to remove specific items from an AngularJS ng-repeat loop?

Access the value of a submitted form using jQuery, when there are multiple forms with identical class names

What is the best approach for creating a test that can simulate and manage errors during JSON parsing in a Node.js

Storing input field values in JavaScript using the onchange event handler.Would you like a different revision

Error: JSON parsing failed due to an unexpected token "u" at the beginning of the JSON string. This occurred in an anonymous function when

What is the process for storing a particular model in a designated collection within MongoDB's database?

Issues with incorrect source path in Typescript, Gulp, and Sourcemaps configuration

"Error message: Attempting to access state in getter without it being defined (Vu

Issue encountered while attempting to utilize setStart and setEnd functions on Range object: Unhandled IndexSizeError: Unable to execute 'setEnd' on 'Range'

Populate the auto complete input box with items from a JSON encoded array

AngularJS: monitoring changes in an array property

Issue with Date Picker not properly storing selected date in MySQL database