Сделайте сложную логику промежуточного программного обеспечения глобального маршрута простой и читаемой!
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
охраннику.