Skip to content

Commit d3186e6

Browse files
dsfx3ddsfx3d
authored
Patch Deploy (#21)
* improvement(opts-helpers): add function to add a property to middleware context * fix(opts-helpers): $addMiddlewareContext, override internal props only * improve(opts-helpers): remove $addMiddlewareContext * chore: setup docs * docs: add documentations * update docs * update docs * update docs * update docs * chore(tslint): change rules * ci: update build branch * refactor: install function * add docs * docs(readme): cleanup and add docs site link * bump patch version * refactor readme
1 parent b44eb57 commit d3186e6

File tree

2 files changed

+45
-165
lines changed

2 files changed

+45
-165
lines changed

‎README.md

Lines changed: 44 additions & 164 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,15 @@
1-
# vue-router-middleware-plugin
1+
# Vue Router Middleware Plugin
22

3-
A vue.js plugin to implement a middleware pipeline for vue-router.
3+
A vue-router middleware pipeline.
44

55
[![npm version](https://badge.fury.io/js/vue-router-middleware-plugin.svg)](https://badge.fury.io/js/vue-router-middleware-plugin)
66
[![Build Status](https://travis-ci.org/dsfx3d/vue-router-middleware-plugin.svg?branch=master)](https://travis-ci.org/dsfx3d/vue-router-middleware-plugin)
77
[![code cove](https://codecov.io/gh/dsfx3d/vue-router-middleware-plugin/branch/master/graph/badge.svg)](https://codecov.io/gh/dsfx3d/vue-router-middleware-plugin/branch/master/graph/badge.svg)
88
[![Codacy Badge](https://api.codacy.com/project/badge/Grade/d1ab723bcfaa460aa9d12ccc7a54bf65)](https://www.codacy.com/manual/dsfx3d/vue-router-middleware-plugin?utm_source=github.com&utm_medium=referral&utm_content=dsfx3d/vue-router-middleware-plugin&utm_campaign=Badge_Grade)
99
![vue-router-middleware-plugin](https://badgen.net/bundlephobia/minzip/vue-router-middleware-plugin)
1010

11-
It can have many use cases like protecting a route or to request an API to populate the store before a route is loaded.
12-
The plugin utilizes [vue-router navigation guards](https://router.vuejs.org/guide/advanced/navigation-guards.html) to implement easy to use, readable and more organized middlewares for your routes.
13-
14-
> **Please Note:** Due to the very limited scope of this module, I do not anticipate need to making many changes to it. Expect long stretches of zero updates—that does not mean that the module is outdated.
11+
The plugin utilizes [vue-router navigation guards](https://router.vuejs.org/guide/advanced/navigation-guards.html)
12+
to implement easy to use, readable and more organized middlewares for your routes.
1513

1614
## Installation
1715

@@ -27,187 +25,69 @@ Install using Yarn
2725
yarn add vue-router-middleware-plugin
2826
```
2927

30-
## Usage
31-
32-
Create a middleware, `auth.js`
33-
34-
```javascript
35-
import store from '~/store'
36-
37-
export default ({ to, from, redirect }) => {
38-
if (!store.getters.isLoggedIn) {
39-
redirect('/login')
40-
// or
41-
redirect(from)
42-
// or
43-
redirect(false)
44-
}
45-
}
46-
```
47-
48-
> **Note:** Properties `to` and `from` are the same as in a vue router navigation gaurds. In __v2.0.0__ functin `next` has been replaced by `redirect` which can be called to redirect to a route. Now, there's no need to call `next` in each middleware to resolve it.
28+
## Get Started in 3 Easy Steps
4929

50-
Register the plugin in your application.
30+
1. Register middleware plugin in your app.
5131

52-
```javascript
53-
import Vue from 'vue'
54-
import MiddlewarePlugin from 'vue-router-middleware-plugin'
55-
import router from '~/router'
56-
import AuthMiddleware from '~router/middlewares/auth'
57-
import LoggerMiddleware from '~router/middlewares/logger'
58-
59-
Vue.use(MiddlewarePlugin, router)
60-
61-
// register a globabl middleware
62-
Vue.use(MiddlewarePlugin, { router, middleware: AuthMiddleware })
63-
64-
// register multiple globabl middlewares
65-
Vue.use(MiddlewarePlugin, {
66-
router,
67-
middleware: [AuthMiddleware, LoggerMiddleware]
68-
})
69-
```
32+
```javascript
33+
import Vue from 'vue'
34+
import MiddlewarePlugin from 'vue-router-middleware-plugin'
35+
import router from '@/path-to-router'
7036

71-
> **Note:**: As the name suggests a global middleware will be resolved before each route.
37+
Vue.use(MiddlewarePlugin, router)
38+
```
7239

73-
Attach route middlewares in `router.js`
40+
2. Create a middleware function.
7441

75-
```javascript
76-
import ExampleMiddleware from './middlewares/example'
77-
import AnotherMiddleware from './middlewares/another'
42+
```javascript
43+
import store from '@/path-to-store'
7844

79-
.
80-
.
81-
.
82-
const routes = [
83-
{
84-
path: '/dashboard',
85-
component: DashboardView,
86-
meta: {
87-
// attavh a middleware to a route
88-
middleware: ExampleMiddleware
89-
}
90-
},
91-
{
92-
path: '/profile',
93-
component: ProfileView,
94-
meta: {
95-
// you may also use an array for multiple middlewares
96-
middleware: [ExampleMiddleware, AnotherMiddleware]
45+
export default ({ to, from, redirect }) => {
46+
if (!store.getters.isLoggedIn) {
47+
redirect('/login')
48+
}
9749
}
98-
},
99-
.
100-
.
101-
.
102-
]
103-
```
50+
```
10451

105-
> **Note**: Global middlewares have precedence over route middlewares
52+
3. Attach middleware to a route.
10653

107-
If the user tries to access `/profile` route, the attached middlewares will be resolved in a synchronous order:
54+
```javascript
55+
import AuthMiddleware from '@/path-to-auth-middleware'
10856
109-
```bash
110-
AuthMiddleware > LoggerMiddleware > ExampleMiddleware > AnotherMiddleware
111-
```
112-
113-
`AuthMiddleware` and `LoggerMiddleware` will be resolved before profile route middlewares because they are global middlewares.
57+
export default new VueRouter({
58+
routes: [
59+
{
60+
path: '/',
61+
meta: {
62+
middleware: AuthMiddleware
63+
},
64+
.
65+
.
66+
},
67+
```
11468

115-
Ignore global middlewares in `router.js`
69+
Note: You may attach multiple middlewares to a route.
11670

11771
```javascript
118-
import AuthMiddleware from './middlewares/auth'
119-
import LoggerMiddleware from './middlewares/logger'
120-
import ExampleMiddleware from './middlewares/example'
121-
import AnotherMiddleware from './middlewares/another'
122-
123-
.
124-
.
125-
.
126-
const routes = [
127-
.
128-
.
129-
.
13072
{
13173
path: '/login',
132-
component: LoginView,
13374
meta: {
134-
middleware: {
135-
ignore: AuthMiddleware
136-
}
137-
}
75+
middleware: [LoggerMiddleware, AnalyticsMiddleware]
76+
},
77+
.
78+
.
13879
},
139-
{
140-
path: '/register',
141-
component: RegisterView,
142-
meta: {
143-
// you may also attach a middleware to this route
144-
middleware: {
145-
ignore: AuthMiddleware
146-
attach: AnotherMiddleware
147-
}
148-
}
149-
},
150-
151-
{
152-
path: '/about',
153-
component: AboutView,
154-
meta: {
155-
// you may also use an array for multiple middlewares
156-
middleware: {
157-
ignore: [AuthMiddleware, LoggerMiddleware]
158-
attach: [ExampleMiddleware, AnotherMiddleware]
159-
}
160-
}
161-
}
162-
]
163-
```
164-
165-
### New features
166-
167-
#### v1.2.0: Custom Middleware properties
168-
169-
You can now pass custom properties in plugin option `context` which will be accessible to the middleware.
170-
171-
```javascript
172-
import Vue from 'vue'
173-
import MiddlewarePlugin from 'vue-router-middleware-plugin'
174-
import router from '~/router'
175-
import store from '~/store'
176-
177-
Vue.use(MiddlewarePlugin, {
178-
router,
179-
// context must be an object
180-
context: {
181-
version: process.env.VERSION
182-
}
183-
})
18480
```
18581

186-
In any middleware, `version` will be added to context
187-
188-
```javascript
189-
export default ({ version }) => {
190-
console.log('version:', version)
191-
}
192-
```
193-
194-
#### v2.0.0: New property in middleware context
195-
196-
* Middlewares don't need to be resolved by calling `next`.
197-
* A new function `redirect`, added to the middleware context.
198-
* **Breaking Change:** Function `next` removed from middleware context.
199-
200-
## Roadmap
82+
Easy as that to get started.
20183

202-
* [x] **v1.0.0** - Route Middlewares.
203-
* [x] **v1.1.0** - Global Middlewares.
204-
* [x] **v1.2.0** - Middleware context - custom properties.
205-
* [x] **v2.0.0** - Middleware Pipeline (rebuild).
206-
* [ ] **v3.1.0** - Update context properties dynamically
84+
:eyes: For advanced features like global middlewares and
85+
middleware context continue to [Documentations](https://vue-router-middleware-plugin.netlify.com/).
20786

20887
## Contributing
20988

210-
Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.
89+
Pull requests are welcome. For major changes, please open an issue first to discuss
90+
what you would like to change.
21191

21292
Please make sure to update tests as appropriate.
21393

‎package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "vue-router-middleware-plugin",
3-
"version": "3.1.0",
3+
"version": "3.1.1",
44
"description": "A vue.js plugin to implement a middleware pipeline between your routes.",
55
"main": "build/index.js",
66
"types": "build/index.d.ts",

0 commit comments

Comments
 (0)