vue-router-guard

Extends route guards.

Usage

import { guard } from 'vue-router-guard'
 
export default {
  props: ['data'],
 
  beforeRouteEnter: guard((to, from, next) => {
    fetchRemoteData().then((data) => {
      // vue-router-guard can pass props to an instance of the component.
      next.props({ data })()
    })
  })
}

Advanced usage

import { beforeRoute } from 'vue-router-guard'
 
export default {
 props: ['data', 'found'],
 
 // beforeRoute(Function) returns
 // { beforeRouteEnter: guard(Function), beforeRouteUpdate: guard(Function) }
 ...beforeRoute(function guard (to, from, next) {
   const { id } = to.params
   
   fetchRemoteData(id).then((data) => {
     next.props({ data, found: true })()
   }, () => {
     // redirect with 301
     return next.redirect('/new-location', 301)
     
     // or proceed with 404
     return next.status(404).props({ found: false })()
     
     // redirect() and status() must be handled on server-side.
     // @see sample/entry-server.js
     // @see sample/server.js
   })
 })
}

Install

npm install vue-router-guard

no need to do Vue.use(...)

next methods

next(value?: boolean | string | Object | Function | Error)

is almost the same as original next. (see https://router.vuejs.org/en/advanced/navigation-guards.html)

On the server, there are some differences.

next(false) during SSR

ends with an error like below.

Error {
    name: {string} 'vue-router-guard'
    type: {string} 'cancel'
    status: {number} 500 // you can set this by calling next.status(number)
                         // or next.cancel(number)
    value: undefined
}

You can handle this error on the server using router.onError(errorHandler) and router.onReady(doneHandler, errorHandler).

router.onError(err => {
    if (err && err.name === 'vue-router-guard' && err.type === 'cancel') {
        // ...
    }
})

Check an example at sample/server.js

next(to: string | Object) during SSR

ends with an error like below.

Error {
    name: {string} 'vue-router-guard'
    type: {string} 'redirect'
    status: {number} 302 // you can set this by calling next.status(number)
                         // or next.redirect(string|Object, number)
    value: {string|Object}
}

You can handle this error on the server using router.onError(errorHandler) and router.onReady(doneHandler, errorHandler).

router.onError(err => {
    if (err && err.name === 'vue-router-guard' && err.type === 'redirect') {
        // ...
    }
})

Check an example at sample/server.js and sample/entry-server.js

next.status(code: number) => next

sets the number to route.meta.status.

You can refer this value at router.onReady(doneHandler).

router.onReady(route => {
   route.meta.status // is the value
})

This method returns the next itself to chain other methods.

Caveat: SSR only - next.status(number) does nothing on the client-side.

Check an example at sample/server.js and sample/entry-server.js

next.cancel(code?: number)

is an alias of next.status(code)(false).

next.redirect(to: string | Object, code?: number)

is an alias of next.status(code)(to).

next.props(props: Object) => next

will pass the props to an instance of the component.

This method returns the next itself to chain other methods.