Make complex global route middleware logic look easy and readable!

GitHub: https://github.com/lionix-team/vue-route-middleware

NPM: https://www.npmjs.com/package/vue-route-middleware

Installation:

npm i vue-route-middleware

Basic Usage:

Set middleware meta key to your route and add our component to any vue router guard hook.

import VueRouteMiddleware from 'vue-route-middleware';...const Router = new VueRouter({    mode: 'history',    routes: [{    path: '/dashboard',    name: 'Dashboard',    component: Dashboard,    meta: {        middleware: (to, from, next) => {            let auth = fakeUser.isLogged();            if(!auth){            next({ name: 'Login' });        }    }}}]});...Router.beforeEach(VueRouteMiddleware());

NOTICE: Middleware function will retrieve all the variables normally passed to the router guards
Example: (to, from, next) in case of beforeEach or (to, from) in case of afterEach guard.

Chain middlewares with an array of functions:

Example:

middleware: [    (to, from, next) => {        let auth = fakeUser.isLogged();        if(!auth){            next({ name: 'Login' });            return false; 
// if false is returned, middleware chain will break!
} }, (to, from, next) => { let hasPaied = fakeUser.madePayment(); if(!hasPaied){ next({ name: 'Payment' }); } }]

NOTICE: If function returns false then the middleware chain will break and no longer execute.

Separated middleware file example:

./route/middleware/auth.js

export default (to, from, next) => {let auth = fakeUser.isLogged();if(!auth){    next({ name: 'Login' });        return false;    }}

router.js

import AuthMiddleware from './route/middleware/auth';...meta: {middleware: [ AuthMiddleware ]}...

Advanced:

Another way to define middlewares is to pass them in the object as the first parameter to
VueRouteMiddleware function and pass an array of middleware key names to the meta of the route.

Example:

import AuthMiddleware from './route/middleware/auth';import PaymentMiddleware from './route/middleware/payment';...meta: {middleware: [ 'AuthMiddleware', 'PaymentMiddleware' ]}...Router.beforeEach(VueRouteMiddleware({ AuthMiddleware, PaymentMiddleware }));

This way we can differentiate middlewares that will be applied with different guards.
For example you want to add tracking middleware to afterEach guard:

Example:

import AuthMiddleware from './route/middleware/auth';import PaymentMiddleware from './route/middleware/payment';import TrackingMiddleware from './route/middleware/tracking';...meta: {// define all applied middleware to the routemiddleware: [ 'AuthMiddleware', 'PaymentMiddleware', 'TrackingMiddleware' ]}...Router.beforeEach(VueRouteMiddleware({ AuthMiddleware, PaymentMiddleware }));// Pass the tracking function to afterEach guardRouter.afterEach(VueRouteMiddleware({ TrackingMiddleware }));

At the example above beforeEach guard will apply chained AuthMiddleware and PaymentMiddleware ignoring the TrackingMiddleware that will be applied on afterEach guard.

Credits:

CEO @ lionix

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store