Vue Routing

vue-routing.js

import Vue from "vue";
import VueRouter from "vue-router";

import Index from "../pages/Index.vue"; // Index Component HERE

import { admin, authenticated, manager, standard } from "../middleware"; // Middleware PATH

Vue.use(VueRouter);

const admins = [];

const clients = [];

const setLayout = layout => route => {
    return {
        ...route,
        meta: { ...route.meta, layout }
    };
};

const setMiddleware = middleware => route => {
    return {
        ...route,
        meta: {
            ...route.meta,
            middleware: [...route.meta.middleware, ...middleware]
        }
    };
};

const pages = [
    {
        path: "/",
        name: "index",
        component: Index,
        meta: {
            middleware: []
        }
    },
    ...admins
        .map(setLayout("admins"))
        .map(setMiddleware([authenticated, standard, manager])),
    ...clients.map(setLayout("clients")),
    {
        path: "*",
        redirect: { name: "home" }
    }
];




const routes = pages;

const router = new VueRouter({
    mode: "history",
    base: process.env.BASE_URL,
    routes
});

const nextFactory = (context, middleware, index) => {
    const subsequentMiddleware = middleware[index];

    if (!subsequentMiddleware) return context.next;

    return (...parameters) => {
        context.next(...parameters);
        const nextMiddleware = nextFactory(context, middleware, index + 1);
        subsequentMiddleware({ ...context, next: nextMiddleware });
    };
};

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

        const context = {
            from,
            next,
            router,
            to
        };

        const nextMiddleware = nextFactory(context, middleware, 1);

        if (to.meta.middleware.length > 0)
            return middleware[0]({ ...context, next: nextMiddleware });
    }

    return next();
});


export {router, pages };