A vue-router middleware pipeline (Nuxt like middlewares in Vue).
The plugin utilizes vue-router navigation guards to implement easy to use, readable and more organized middlewares for your routes.
Install using NPM
npm i -S vue-router-middleware-pluginInstall using Yarn
yarn add vue-router-middleware-plugin-
Register middleware plugin in your app.
import Vue from 'vue' import MiddlewarePlugin from 'vue-router-middleware-plugin' import router from '@/path-to-router' Vue.use(MiddlewarePlugin, router)
-
Create a middleware function.
import store from '@/path-to-store' export default ({ to, from, redirect }) => { if (!store.getters.isLoggedIn) { redirect('/login') } }
-
Attach middleware to a route.
import AuthMiddleware from '@/path-to-auth-middleware' export default new VueRouter({ routes: [ { path: '/', meta: { middleware: AuthMiddleware }, . . },
Note: You may attach multiple middlewares to a route.
{
path: '/login',
meta: {
middleware: [LoggerMiddleware, AnalyticsMiddleware]
},
.
.
},Easy as that to get started.
👀 For advanced features like global middlewares and middleware context continue to Documentations.
Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.
Please make sure to update tests as appropriate.
![dependabot[bot] avatar](https://avatars.githubusercontent.com/in/29110?v=4 "dependabot[bot]")
![renovate[bot] avatar](https://avatars.githubusercontent.com/in/2740?v=4 "renovate[bot]")
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent