vue router guard

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

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 countries = { Spain: 'Spain' }
 
const user = {
	name: 'Quique',
  age: 9,
  country: 'Spainh'
}

const isLoggedIn = (to, from, next) => {
	if (user) {
  	console.log('isLoggedIn ok...')
  	next()
  }
}

const isAnAdult = (to, from, next) => {
	if (user.age > 18) {
    console.log('isAnAdult ok...')
  	next()
  }
}

const isFromSpain = (to, from, next) => {
	if (user.country === countries.Spain) {
  	console.log('isFromSpain ok...')
  	next()
  }
}

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

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