https://github.com/grafikri/vue-middleware
Middleware for Vue
https://github.com/grafikri/vue-middleware
Last synced: 4 months ago
JSON representation
Middleware for Vue
- Host: GitHub
- URL: https://github.com/grafikri/vue-middleware
- Owner: grafikri
- Created: 2020-11-21T16:05:53.000Z (about 5 years ago)
- Default Branch: develop
- Last Pushed: 2021-06-17T00:30:02.000Z (over 4 years ago)
- Last Synced: 2024-11-29T09:53:54.075Z (about 1 year ago)
- Language: TypeScript
- Size: 28.3 KB
- Stars: 9
- Watchers: 1
- Forks: 3
- Open Issues: 1
-
Metadata Files:
- Readme: readme.md
Awesome Lists containing this project
- awesome-vue - vue-middleware - Middleware for Vue ` 📝 7 months ago` (UI Utilities [🔝](#readme))
- awesome-vue - vue-middleware - Middleware for Vue. (Components & Libraries / UI Utilities)
README
[](https://travis-ci.org/grafikri/vue-middleware)
[](https://packagephobia.com/result?p=@grafikri/vue-middleware)
# Middleware for Vue
## Main features
- Injecting custom object for middlewares
- Adjusting multiple middleware rules
- Easy implementation
### Installation
```bash
$ npm i @grafikri/vue-middleware
```
### Usage in 3 steps
#### 1. Register the module in the main file
You can also inject any object to a module to take it in middleware method(recommended vuex store, it will be mentioned below)
```js
// main.js
import router from "./router"
import middleware from "@grafikri/vue-middleware"
router.beforeEach(middleware())
```
#### 2. Specify logic
You can put your middleware methods under any folder. There is no rule for this.
```js
// middleware/authentication.js
export default ({ to, from, next }) => {
// Your custom if statement
if (!userLoggedIn) {
next("/login")
return false
}
next()
}
```
> Mentioned params to, from, and next completely same with Vue Router [navigation guard params](https://router.vuejs.org/guide/advanced/navigation-guards.html#global-before-guards)
#### 3. Adjust middleware for any route under meta key
```js
// router/index.js
import authentication from "../middleware/authentication"
const routes = [
{
path: "/user-profile",
meta: {
middleware: [authentication],
},
},
]
```
### Injecting custom object (recommended vuex store)
You can inject any object
```js
// main.js
import router from "./router"
import store from "./store"
import middleware from "@grafikri/vue-middleware"
router.beforeEach(middleware({ store }))
```
to retrive it inside of middleware method
```js
// middleware/authentication.js
export default ({ store, next }) => {
if (!store.state.user.loggedIn) {
next("/login")
return false
}
next()
}
```
> There is one important rule for chaining that you must return `false` if you want to stop the next middleware method.
### Defining multiple middlewares
You can define more than one middleware methods that will be invoked respectively.
```js
// router/index.js
import authentication from "../middleware/authentication"
import authorization from "../middleware/authorization"
const routes = [
{
path: "/payments",
meta: {
middleware: [authentication, authorization],
},
},
]
```