Group routes with middleware

resources/assets/js/pages/auth/login.vue

@@ -61,7 +61,6 @@ import Form from 'vform'
 import LoginWithGithub from '~/components/LoginWithGithub'
 
 export default {
-  middleware: 'guest',
   components: {
     LoginWithGithub
   },

resources/assets/js/pages/auth/password/email.vue

@@ -35,8 +35,6 @@
 import Form from 'vform'
 
 export default {
-  middleware: 'guest',
-
   metaInfo () {
     return { title: this.$t('reset_password') }
   },

resources/assets/js/pages/auth/password/reset.vue

@@ -55,8 +55,6 @@
 import Form from 'vform'
 
 export default {
-  middleware: 'guest',
-
   metaInfo () {
     return { title: this.$t('reset_password') }
   },

resources/assets/js/pages/auth/register.vue

@@ -67,7 +67,6 @@ import Form from 'vform'
 import LoginWithGithub from '~/components/LoginWithGithub'
 
 export default {
-  middleware: 'guest',
   components: {
     LoginWithGithub
   },

resources/assets/js/pages/home.vue

@@ -8,7 +8,7 @@
 
 <script>
 export default {
-  middleware: 'auth',
+  // middleware: 'auth',
 
   metaInfo () {
     return { title: this.$t('home') }

resources/assets/js/pages/settings/index.vue

@@ -25,10 +25,6 @@
 
 <script>
 export default {
-  loading: false,
-
-  middleware: 'auth',
-
   computed: {
     tabs () {
       return [

resources/assets/js/router/index.js

@@ -29,25 +29,51 @@ export default router
  */
 function createRouter () {
   const router = new Router({
-    routes,
     scrollBehavior,
-    mode: 'history'
+    mode: 'history',
+    routes: routes.map(beforeEnter)
   })
 
-  router.beforeEach(globalGuard)
-  router.afterEach(afterHook)
+  router.beforeEach(beforeEach)
+  router.afterEach(afterEach)
 
   return router
 }
 
+/**
+ * Add per-route beforeEnter guard.
+ *
+ * @param  {Object} route
+ * @return {Object}
+ */
+function beforeEnter (route) {
+  if (route.children) {
+    route.children.forEach(beforeEnter)
+  }
+
+  let middleware = route.middleware || []
+
+  if (!Array.isArray(middleware)) {
+    middleware = [middleware]
+  }
+
+  if (middleware.length > 0) {
+    route.beforeEnter = (to, from, next) => {
+      callMiddleware(middleware, to, from, next)
+    }
+  }
+
+  return route
+}
+
 /**
  * Global router guard.
  *
  * @param {Route} to
  * @param {Route} from
  * @param {Function} next
  */
-async function globalGuard (to, from, next) {
+async function beforeEach (to, from, next) {
   // Get the matched components and resolve them.
   const components = await resolveComponents(
     router.getMatchedComponents({ ...to })
@@ -58,7 +84,9 @@ async function globalGuard (to, from, next) {
   }
 
   // Start the loading bar.
-  router.app.$nextTick(() => router.app.$loading.start())
+  if (components[components.length - 1].loading !== false) {
+    router.app.$nextTick(() => router.app.$loading.start())
+  }
 
   // Get the middleware for all the matched components.
   const middleware = getMiddleware(components)
@@ -67,6 +95,19 @@ async function globalGuard (to, from, next) {
   callMiddleware(middleware, to, from, next)
 }
 
+/**
+ * Global after hook.
+ *
+ * @param {Route} to
+ * @param {Route} from
+ * @param {Function} next
+ */
+async function afterEach (to, from, next) {
+  await router.app.$nextTick()
+
+  router.app.$loading.finish()
+}
+
 /**
  * Call each middleware.
  *
@@ -134,19 +175,6 @@ function getMiddleware (components) {
   return middleware
 }
 
-/**
- * Global after hook.
- *
- * @param {Route} to
- * @param {Route} from
- * @param {Function} next
- */
-async function afterHook (to, from, next) {
-  await router.app.$nextTick()
-
-  router.app.$loading.finish()
-}
-
 /**
  * Scroll Behavior
  *

resources/assets/js/router/routes.js

@@ -13,22 +13,43 @@ const SettingsPassword = () => import('~/pages/settings/password').then(m => m.d
 export default [
   { path: '/', name: 'welcome', component: Welcome },
 
-  { path: '/login', name: 'login', component: Login },
-  { path: '/register', name: 'register', component: Register },
-  { path: '/password/reset', name: 'password.request', component: PasswordRequest },
-  { path: '/password/reset/:token', name: 'password.reset', component: PasswordReset },
-
-  { path: '/home', name: 'home', component: Home },
-  { path: '/settings', component: Settings, children: [
-    { path: '', redirect: { name: 'settings.profile' }},
-    { path: 'profile', name: 'settings.profile', component: SettingsProfile },
-    { path: 'password', name: 'settings.password', component: SettingsPassword }
-  ] },
+  ...middleware('guest', [
+    { path: '/login', name: 'login', component: Login },
+    { path: '/register', name: 'register', component: Register },
+    { path: '/password/reset', name: 'password.request', component: PasswordRequest },
+    { path: '/password/reset/:token', name: 'password.reset', component: PasswordReset }
+  ]),
+
+  ...middleware('auth', [
+    { path: '/home', name: 'home', component: Home },
+    { path: '/settings', component: Settings, children: [
+      { path: '', redirect: { name: 'settings.profile' }},
+      { path: 'profile', name: 'settings.profile', component: SettingsProfile },
+      { path: 'password', name: 'settings.password', component: SettingsPassword }
+    ] }
+  ]),
 
   // ...middleware('admin', [
   //   { path: '/admin', name: 'admin', component: require('~/pages/admin') }
-  // ])
+  // ]),
   // { path: '/example', name: 'example', component: require('~/pages/example'), middleware: ['admin'] },
 
   { path: '*', component: require('~/pages/errors/404.vue') }
 ]
+
+/**
+ * @param  {String|Array|Function} middleware
+ * @param  {Array} routes
+ * @return {Array}
+ */
+function middleware (middleware, routes) {
+  if (Array.isArray(middleware)) {
+    middleware = [middleware]
+  }
+
+  routes.forEach(route => {
+    (route.middleware || (route.middleware = [])).unshift(middleware)
+  })
+
+  return routes
+}