vue-router-middlewares
v1.0.2
Published
A simple koa-like middleware wrapper for vue-router
Downloads
4
Maintainers
Readme
Vue-Route-Middleware
A simple koa-like middleware wrapper for vue-router
Caution
This module is still being developed and no guaruntee on production enviorment
Features
- Koa-like api
- Support either async or sync middleware
- A context object to store data through the whole routing lifecycle
Install
By script tag
<script src="cdn/vue.js"></script>
<script src="cdn/vue-router.js"></script>
<script src="node_modules/vue-router-middleware/lib/index.js"></script>
By commonjs
npm install vue-router-middlewares -S
import vueRouterWrapper from 'vue-router-middlewares'
// or
const vueRouterWrapper = require('vue-router-middlewares')
How to use
Here is a simple snippet to show the use case
// create a vue-router instance
const originRouter = new VueRouter({
...// here your routes config
})
// wrapped it with vue-route-middleware
const router = vueRouterWrapper(originRouter, { debug: true })
// support chainning
router
// async middleware
.use(async(ctx,next) => {
const res = await fetch('/path/to/api')
await next()
// logic if passed later middleware
remoteLog()
})
// sync middleware
.use((ctx,next) => {
next()
})
.use((ctx,next) => {
// ignore the later middlewares
if(!ctx.auth) return
next()
})
// stop routing if getting errors
.use(ctx,next) => {
throw new Error('oops')
})
new Vue({
router
}).$mount('#app')
the complete example could be found in the repo.
Context
I've delegate some params from origin vue-router instance to the ctx object passed to the middleware.
'path', 'query', 'params', 'meta', 'name', 'hash', 'matched' from to-router-instance are mapped to ctx[key]
remember they are just writeable params, if you try to set value on them, it will generate or overwrite ctx[_key]
and if you rewrite ctx.path, if the middlewares all passed, the router will change its destination like a redirecting.