A middleware system for Vue-router and Vuex

Installation

npm i @primitivesocial/ps-kernel --save

Configuration

In your app.js file, import the Vue router, Vuex and define the router as any vuex/vue-router app:

importstorefrom'./vuex/store'// vuex store instanceimportrouterfrom'./router'// vue-router instanceconstrouter=newVueRouter(...);

Import the kernel and add it to the vue-router beforeEach hook.

importKernelfrom"@primitivesocial/ps-kernel";router.beforeEach((to,from,next)=>{letkernel=newKernel(to,next,store);kernel.run();});

Usage

Middlewares are simply ES6 exported functions. The function accepts a destructred object as parameter, which contains the store instance, a next function and a redirect function. The redirect function accepts a route name as parameter.

//auth.js middleware fileexportdefaultfunctionauth({ store, redirect, next }){if(!store.getters['user/id']){returnredirect('Login');// 'Login' is the route name}//proceed the requestreturnnext();}

And in your route definitions, add it inside tge middleware meta field:

importauthfrom"./auth";letroutes=[{path: '/login',component: Login,name: 'Login'},{path: '/dashboard',component: Dashboard,meta: {middleware: [auth,]},},]

The middleware meta field accepts an array, which means, you can add multiple middleware per route 🔥 🔥

Author & Contribution

Hey, I'm Elie Andraos, a web developer at Primitive Social. Pull requests are always welcome. For major changes, please open an issue first to discuss what you would like to change. You can also reach me out on twitter for any question!