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