Сделайте сложную логику промежуточного программного обеспечения глобального маршрута простой и читаемой!

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

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

Установка:

npm i vue-route-middleware

Основное использование:

Установите мета-ключ middleware для вашего маршрута и добавьте наш компонент к любому хуку vue router guard.

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());

ВНИМАНИЕ: функция промежуточного программного обеспечения будет извлекать все переменные, которые обычно передаются охранникам маршрутизатора.
Пример: (to, from, next) в случае beforeEach или (to, from) в случае afterEach guard .

Последовательность промежуточного программного обеспечения с набором функций:

Пример:

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' });
        }
    }
]

ВНИМАНИЕ: если функция возвращает false, цепочка промежуточного программного обеспечения прерывается и больше не выполняется.

Пример отдельного промежуточного файла:

./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 ]
}
...

Передовой:

Другой способ определения промежуточного программного обеспечения - передать его в объекте в качестве первого параметра функции
VueRouteMiddleware и передать массив имен ключей промежуточного программного обеспечения в мета маршрута.

Пример:

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

Таким образом, мы можем различать промежуточное ПО, которое будет применяться с разными защитниками.
Например, вы хотите добавить промежуточное ПО отслеживания в afterEach guard:

Пример:

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 }));

В приведенном выше примере beforeEach охранник будет применять цепочку AuthMiddleware и PaymentMiddleware, игнорируя TrackingMiddleware, который будет применен к afterEach охраннику.

Кредиты: