Skip to content

Commit f05dbb8

Browse files
iodsfx3diodsfx3d
committed
docs(readme): cleanup and add docs site link
1 parent a82aa77 commit f05dbb8

File tree

1 file changed

+7
-184
lines changed

1 file changed

+7
-184
lines changed

‎README.md

Lines changed: 7 additions & 184 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,12 @@ 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.
49-
50-
Register the plugin in your application.
51-
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-
```
70-
71-
> **Note:**: As the name suggests a global middleware will be resolved before each route.
72-
73-
Attach route middlewares in `router.js`
74-
75-
```javascript
76-
import ExampleMiddleware from './middlewares/example'
77-
import AnotherMiddleware from './middlewares/another'
78-
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]
97-
}
98-
},
99-
.
100-
.
101-
.
102-
]
103-
```
104-
105-
> **Note**: Global middlewares have precedence over route middlewares
106-
107-
If the user tries to access `/profile` route, the attached middlewares will be resolved in a synchronous order:
108-
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.
114-
115-
Ignore global middlewares in `router.js`
116-
117-
```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-
.
130-
{
131-
path: '/login',
132-
component: LoginView,
133-
meta: {
134-
middleware: {
135-
ignore: AuthMiddleware
136-
}
137-
}
138-
},
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-
})
184-
```
185-
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
201-
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
28+
### :eyes: Goto [Documentations](https://vue-router-middleware-plugin.netlify.com/)
20729

20830
## Contributing
20931

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

21235
Please make sure to update tests as appropriate.
21336

0 commit comments

Comments
 (0)