VUE ROUTER MIDDLEWARE

Create multiple validations in vue router with middlewares

---

Instalation

with npm

  npm install --save vue-router-middleware

with yarn

  yarn add vue-router-middleware

Get Started

Install it as a Vue Plugin like this.

  const Vue from 'vue' 
  const VueRouter from 'vue-router' 
 
  const VueRouterMiddleware from 'vue-router-middleware' 
 
  const routes = [
    // ...
    // Create your route schema here.
  ]
 
  const router = new VueRouter({ routes })
  Vue.use(VueRouter)
 
  // Install it by pass your router instance to be an option argument.
  Vue.use(VueRouterMiddleware, { router })
 
  new Vue({ router })
 

And create middleware

  const { createMiddleware } from 'vue-router-middleware' 
 
  const FakeAuth = {
    isAuthenticated() {
      return true
    }
  }
 
  // Pass middleware name and callback function
  createMiddleware('require-auth', (args, to, from, next) => {
 
    if(FakeAuth.isAuthenticated())
      // ok, all is fine. go to next route
      next()
    else
      // hum... not's fine, cancel the middleware
      next(false)
 
  })
 

with Vue.use

 
  Vue.use(VueRouterMiddleware, {
    router,
    middlewares: {
      // Convert to camelcase to dash string ex. requireAuth saves require-auth
      requireAuth(params, to, from, next) {
        // Logic here
      },
      checkPermission(params, to, from, next) {
        // Get params
        next( params.includes('super-user') )
      }
    }
  })
 

Set middleware in routes Use Spread Operator with middleware() to make more simple and pretty

  import VueRouter from 'vue-router'
  import VueRouterMiddleware, { middleware } from 'vue-router-middleware'
 
  const routes = [
 
    ...middleware('require-auth', [
 
      {
        // Active middleware ['require-auth']
        component: Dashboard
        path: '/dashboard',
        name: 'dashboard'
      },
 
      // Pass parameters to middleware
      ...middleware({ 'check-permission': ['super-user'] }, [
        {
          // Active middlewares in sequence ['require-auth', 'check-permission']
          component: Settings
          path: '/settings',
          name: 'settings',
 
          children: [
            // Active middlewares in sequence ['require-auth', 'check-permission']
            // Childrens inherits middleware from parent route
            {
              component: SettingsAccount
              path: '/settings/account',
              name: 'settings.account'
            }
          ]
        }
      ])
 
    ]),
    {
      // Route without middlewares
      path: '/login',
      name: 'login',
      component: LoginComponent
    }
  ]
 
  const router = new VueRouter({ routes })
 
  Vue.use(VueRouter)
  Vue.use(VueRouterMiddleware, { router })

Capture on middleware is canceled

  const VueRouter from 'vue-router' 
  const VueRouterMiddleware from 'vue-router-middleware' 
 
  const router = new VueRouter({ routes })
 
  Vue.use(VueRouter)
  Vue.use(VueRouterMiddleware, {
    router,
    events: {
      onCancelMiddleware(middlewareName, to, from, next) {
        console.log(`next(false) has called in ${middlewareName}`)
      }
    }
  })

Simple, a right? You need more ? Full documents here

License

MIT Copyright (c) Andrey Dias