vue-route-middleware

    1.0.7 • Public • Published

    vue-route-middleware  

    Make complex global route middleware logic look easy and readable!

    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 route
        middleware: [ 'AuthMiddleware', 'PaymentMiddleware', 'TrackingMiddleware' ]
    }
    ...
    Router.beforeEach(VueRouteMiddleware({ AuthMiddleware, PaymentMiddleware }));
    // Pass the tracking function to afterEach guard
    Router.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:

    Install

    npm i vue-route-middleware

    DownloadsWeekly Downloads

    238

    Version

    1.0.7

    License

    MIT

    Unpacked Size

    28.1 kB

    Total Files

    5

    Last publish

    Collaborators

    • vaawebdev