vue-route-middleware
v1.0.7
Published
Make complex route middleware logic look easy and readable!
Downloads
1,327
Maintainers
Readme
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.