Fix middleware on server-side

examples/middleware/middleware/visits.js

@@ -1,3 +1,4 @@
-export default function ({ store, route }) {
+export default function ({ store, route, redirect }) {
   store.commit('ADD_VISIT', route.path)
+  if (route.fullPath === '/') return redirect('/foo')
 }

examples/middleware/pages/_slug.vue

@@ -12,6 +12,7 @@
 <script>
 export default {
   asyncData ({ store, route, userAgent }) {
+    console.log('Call async data', route.fullPath)
     return {
       userAgent,
       slugs: [

lib/app/client.js

@@ -3,7 +3,7 @@
 import Vue from 'vue'
 import middleware from './middleware'
 import { app, router<%= (store ? ', store' : '') %>, NuxtError } from './index'
-import { applyAsyncData, getMatchedComponents, getMatchedComponentsInstances, flatMapComponents, getContext, promiseSeries, promisify, getLocation, compile } from './utils'
+import { applyAsyncData, getMatchedComponents, getMatchedComponentsInstances, flatMapComponents, getContext, middlewareSeries, promisify, getLocation, compile } from './utils'
 const noopData = () => { return {} }
 const noopFetch = () => {}
 let _lastPaths = []
@@ -77,7 +77,7 @@ function callMiddleware (Components, context, layout) {
     return middleware[name]
   })
   if (unknownMiddleware) return
-  return promiseSeries(midd, context)
+  return middlewareSeries(midd, context)
 }
 
 function render (to, from, next) {

lib/app/server.js

@@ -1,14 +1,13 @@
 'use strict'
 
-const debug = require('debug')('nuxt:render')
-debug.color = 4 // force blue color
 import Vue from 'vue'
-
 import { stringify } from 'querystring'
 import { omit } from 'lodash'
 import middleware from './middleware'
 import { app, router<%= (store ? ', store' : '') %>, NuxtError } from './index'
-import { applyAsyncData, getMatchedComponents, getContext, promiseSeries, promisify, urlJoin } from './utils'
+import { applyAsyncData, sanitizeComponent, getMatchedComponents, getContext, middlewareSeries, promisify, urlJoin } from './utils'
+const debug = require('debug')('nuxt:render')
+debug.color = 4 // force blue color
 
 const isDev = <%= isDev %>
 const _app = new Vue(app)
@@ -18,7 +17,7 @@ const _app = new Vue(app)
 // state of our application before actually rendering it.
 // Since data fetching is async, this function is expected to
 // return a Promise that resolves to the app instance.
-export default context => {
+export default async (context) => {
   // Add store to the context
   <%= (store ? 'context.store = store' : '') %>
   // Nuxt object
@@ -47,37 +46,23 @@ export default context => {
 
   <%= (isDev ? 'const s = isDev && Date.now()' : '') %>
   let ctx = null
-  let componentsLoaded = false
   let Components = []
   let promises = getMatchedComponents(router.match(context.url)).map((Component) => {
     return new Promise((resolve, reject) => {
-      const _resolve = (Component) => {
-        if (!Component.options) {
-          Component = Vue.extend(Component) // fix issue #6
-          Component._Ctor = Component
-        } else {
-          Component._Ctor = Component
-          Component.extendOptions = Component.options
-        }
-        // For debugging purpose
-        if (!Component.options.name && Component.options.__file) {
-          Component.options.name = Component.options.__file
-        }
-        resolve(Component)
-      }
+      const _resolve = (Component) => resolve(sanitizeComponent(Component))
       Component().then(_resolve).catch(reject)
     })
   })
-  return Promise.all(promises)
-  .then((_Components) => {
-    componentsLoaded = true
-    Components = _Components
+  try {
+    Components = await Promise.all(promises)
+  } catch (err) {
+    // Throw back error to renderRoute()
+    throw err
+  }
   // set router's location
-    return new Promise((resolve) => {
+  await new Promise((resolve) => {
     router.push(context.url, resolve)
   })
-  })
-  .then(() => {
   // Add route to the context
   context.route = router.currentRoute
   // Update context
@@ -89,21 +74,7 @@ export default context => {
   <% } else { %>
     let promise = Promise.resolve()
   <% } %>
-    return promise
-  })
-  .then(() => {
-    // Sanitize Components
-    Components = Components.map((Component) => {
-      let promises = []
-      if (!Component.options) {
-        Component = Vue.extend(Component)
-        Component._Ctor = Component
-      } else {
-        Component._Ctor = Component
-        Component.extendOptions = Component.options
-      }
-      return Component
-    })
+  await promise
   // Call global middleware (nuxt.config.js)
   let midd = <%= serialize(router.middleware, { isJSON: true }) %>
   midd = midd.map((name) => {
@@ -112,25 +83,20 @@ export default context => {
     }
     return middleware[name]
   })
-    if (context.nuxt.error) return
-    return promiseSeries(midd, ctx)
-  })
-  .then(() => {
+  if (!context.nuxt.error) {
+    await middlewareSeries(midd, ctx)
+  }
+  if (context.redirected) return _app
   // Set layout
   let layout = Components.length ? Components[0].options.layout : NuxtError.layout
-    if (typeof layout === 'function') {
-      layout = layout(ctx)
-    }
-    return _app.loadLayout(layout).then(() => _app.setLayout(layout))
-  })
-  .then((layout) => {
+  if (typeof layout === 'function') layout = layout(ctx)
+  await _app.loadLayout(layout)
+  layout = _app.setLayout(layout)
   // Set layout to __NUXT__
   context.nuxt.layout = _app.layoutName
   // Call middleware (layout + pages)
-    let midd = []
-    if (layout.middleware) {
-      midd = midd.concat(layout.middleware)
-    }
+  midd = []
+  if (layout.middleware) midd = midd.concat(layout.middleware)
   Components.forEach((Component) => {
     if (Component.options.middleware) {
       midd = midd.concat(Component.options.middleware)
@@ -142,10 +108,10 @@ export default context => {
     }
     return middleware[name]
   })
-    if (context.nuxt.error) return
-    return promiseSeries(midd, ctx)
-  })
-  .then(() => {
+  if (!context.nuxt.error) {
+    await middlewareSeries(midd, ctx)
+  }
+  if (context.redirected) return _app
   // Call .validate()
   let isValid = true
   Components.forEach((Component) => {
@@ -156,6 +122,7 @@ export default context => {
       query: context.route.query  || {}<%= (store ? ', store: ctx.store' : '') %>
     })
   })
+  // If .validate() returned false
   if (!isValid) {
     // Don't server-render the page in generate mode
     if (context._generate) {
@@ -163,10 +130,9 @@ export default context => {
     }
     // Call the 404 error by making the Components array empty
     Components = []
-      return _app
   }
   // Call asyncData & fetch hooks on components matched by the route.
-    return Promise.all(Components.map((Component) => {
+  let asyncDatas = await Promise.all(Components.map((Component) => {
     let promises = []
     if (Component.options.asyncData && typeof Component.options.asyncData === 'function') {
       let promise = promisify(Component.options.asyncData, ctx)
@@ -176,29 +142,25 @@ export default context => {
         return asyncDataResult
       })
       promises.push(promise)
-      } else {
-        promises.push(null)
-      }
-      if (Component.options.fetch) {
-        promises.push(Component.options.fetch(ctx))
-      } else {
-        promises.push(null)
-      }
+    } else promises.push(null)
+    // call fetch(context)
+    if (Component.options.fetch) promises.push(Component.options.fetch(ctx))
+    else promises.push(null)
     return Promise.all(promises)
   }))
-  })
-  .then((res) => {
+  // If no Components found, returns 404
   if (!Components.length) {
     context.nuxt.error = context.error({ statusCode: 404, message: 'This page could not be found.' })
-      <%= (store ? 'context.nuxt.state = store.state' : '') %>
-      return _app
   }
   <% if (isDev) { %>
-      debug('Data fetching ' + context.url + ': ' + (Date.now() - s) + 'ms')
+    if (asyncDatas.length) debug('Data fetching ' + context.url + ': ' + (Date.now() - s) + 'ms')
   <% } %>
   // datas are the first row of each
-    context.nuxt.data = res.map((r) => (r[0] || {}))
+  context.nuxt.data = asyncDatas.map((r) => (r[0] || {}))
+  // If an error occured in the execution
+  if (_app.$options._nuxt.err) {
     context.nuxt.error = _app.$options._nuxt.err
+  }
   <%= (store ? '// Add the state from the vuex store' : '') %>
   <%= (store ? 'context.nuxt.state = store.state' : '') %>
   // If no error, return main app
@@ -206,21 +168,15 @@ export default context => {
     return _app
   }
   // Load layout for error page
-    let layout = (typeof NuxtError.layout === 'function' ? NuxtError.layout(ctx) : NuxtError.layout)
+  layout = (typeof NuxtError.layout === 'function' ? NuxtError.layout(ctx) : NuxtError.layout)
   context.nuxt.layout = layout || ''
-    return _app.loadLayout(layout)
-    .then(() => _app.setLayout(layout))
-    .then(() => _app)
-  })
-  .catch(function (error) {
-    if (error instanceof Error || error.constructor.toString().indexOf('Error()') !== -1) {
-      return Promise.reject(error)
-    }
-    if (typeof error === 'string') {
-      error = { statusCode: 500, message: error }
-    }
-    context.nuxt.error = context.error(error)
-    <%= (store ? 'context.nuxt.state = store.state' : '') %>
+  await _app.loadLayout(layout)
+  _app.setLayout(layout)
   return _app
-  })
+    // if (typeof error === 'string') {
+    //   error = { statusCode: 500, message: error }
+    // }
+    // context.nuxt.error = context.error(error)
+    // <%= (store ? 'context.nuxt.state = store.state' : '') %>
+    // return _app
 }

lib/app/utils.js

@@ -1,4 +1,5 @@
 'use strict'
+import Vue from 'vue'
 import { app } from './index'
 
 const noopData = () => ({})
@@ -14,6 +15,21 @@ export function applyAsyncData (Component, asyncData = {}) {
   }
 }
 
+export function sanitizeComponent (Component) {
+  if (!Component.options) {
+    Component = Vue.extend(Component) // fix issue #6
+    Component._Ctor = Component
+  } else {
+    Component._Ctor = Component
+    Component.extendOptions = Component.options
+  }
+  // For debugging purpose
+  if (!Component.options.name && Component.options.__file) {
+    Component.options.name = Component.options.__file
+  }
+  return Component
+}
+
 export function getMatchedComponents (route) {
   return [].concat.apply([], route.matched.map(function (m) {
     return Object.keys(m.components).map(function (key) {
@@ -54,7 +70,7 @@ export function getContext (context) {
   ctx.query = ctx.route.query || {}
   ctx.redirect = function (status, path, query) {
     if (!status) return
-    ctx._redirected = true
+    ctx._redirected = true // Used in middleware
     // if only 1 or 2 arguments: redirect('/') or redirect('/', { foo: 'bar' })
     if (typeof status === 'string' && (typeof path === 'undefined' || typeof path === 'object')) {
       query = path || {}
@@ -82,13 +98,13 @@ export function getContext (context) {
   return ctx
 }
 
-export function promiseSeries (promises, context) {
+export function middlewareSeries (promises, context) {
   if (!promises.length || context._redirected) {
     return Promise.resolve()
   }
   return promisify(promises[0], context)
   .then(() => {
-    return promiseSeries(promises.slice(1), context)
+    return middlewareSeries(promises.slice(1), context)
   })
 }