vue router guard

https://medium.com/p/6343d7be5e6c

by Quique Fdez Guerra

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue-router/3.0.1/vue-router.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue-router-multiguard.min.js"></script>
<div id="app">
  <router-link to="/">/root</router-link>
  <router-link to="/page1">/page1</router-link>
  <router-link to="/page2">/page2</router-link>
  <router-view></router-view>
</div>

JavaScript

const Root = { template: '<div>Root</div>' }
const Page1 = { template: '<div>Page1</div>' }
const Page2 = { template: '<div>Page2</div>' }

const guard1 = (to, from, next) => {
	console.log('First guard!!')
  next()
}

const guard2 = (to, from, next) => {
	console.log('Second guard!!')
}

const guard3 = (to, from, next) => {
	console.log('Nobody calls me :( because no next() on second guard')
  next()
}

const router = new VueRouter({
  mode: 'history',
  routes: [
    { 
    	path: '/', 
    	component: Root, 
    	beforeEnter: VueRouterMultiguard([guard1, guard2, guard3])
    },
    { 
    	path: '/page1', 
    	component: Page1, 
    	beforeEnter: VueRouterMultiguard([guard1, guard2, guard3])
    },
    { 
    	path: '/page2', 
    	component: Page2, 
    	beforeEnter: VueRouterMultiguard([guard1, guard2, guard3])
    },
  ]
})

new Vue({
	router,
  el: '#app',
})