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 { createApp, 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 = []
@@ -79,7 +79,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 { createApp, 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 %>
 
@@ -17,7 +16,7 @@ const isDev = <%= isDev %>
 // 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) => {
   const { app, router<%= (store ? ', store' : '') %> } = createApp(context)
   const _app = new Vue(app)
   // Add store to the context
@@ -48,180 +47,137 @@ 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
-    // set router's location
-    return new Promise((resolve) => {
-      router.push(context.url, resolve)
-    })
+  try {
+    Components = await Promise.all(promises)
+  } catch (err) {
+    // Throw back error to renderRoute()
+    throw err
+  }
+  // set router's location
+  await new Promise((resolve) => {
+    router.push(context.url, resolve)
   })
-  .then(() => {
-    // Add route to the context
-    context.route = router.currentRoute
-    // Update context
-    ctx = getContext(context)
-    // nuxtServerInit
-    <% if (store) { %>
-      let promise = (store._actions && store._actions.nuxtServerInit ? store.dispatch('nuxtServerInit', omit(getContext(context), 'redirect', 'error')) : null)
-      if (!promise || (!(promise instanceof Promise) && (typeof promise.then !== 'function'))) promise = Promise.resolve()
-    <% } 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
-    })
-    // Call global middleware (nuxt.config.js)
-    let midd = <%= serialize(router.middleware, { isJSON: true }) %>
-    midd = midd.map((name) => {
-      if (typeof middleware[name] !== 'function') {
-        context.nuxt.error = context.error({ statusCode: 500, message: 'Unknown middleware ' + name })
-      }
-      return middleware[name]
-    })
-    if (context.nuxt.error) return
-    return promiseSeries(midd, ctx)
-  })
-  .then(() => {
-    // Set layout
-    let layout = Components.length ? Components[0].options.layout : NuxtError.layout
-    if (typeof layout === 'function') {
-      layout = layout(ctx)
+  // Add route to the context
+  context.route = router.currentRoute
+  // Update context
+  ctx = getContext(context)
+  // nuxtServerInit
+  <% if (store) { %>
+    let promise = (store._actions && store._actions.nuxtServerInit ? store.dispatch('nuxtServerInit', omit(getContext(context), 'redirect', 'error')) : null)
+    if (!promise || (!(promise instanceof Promise) && (typeof promise.then !== 'function'))) promise = Promise.resolve()
+  <% } else { %>
+    let promise = Promise.resolve()
+  <% } %>
+  await promise
+  // Call global middleware (nuxt.config.js)
+  let midd = <%= serialize(router.middleware, { isJSON: true }) %>
+  midd = midd.map((name) => {
+    if (typeof middleware[name] !== 'function') {
+      context.nuxt.error = context.error({ statusCode: 500, message: 'Unknown middleware ' + name })
     }
-    return _app.loadLayout(layout).then(() => _app.setLayout(layout))
+    return middleware[name]
   })
-  .then((layout) => {
-    // Set layout to __NUXT__
-    context.nuxt.layout = _app.layoutName
-    // Call middleware (layout + pages)
-    let midd = []
-    if (layout.middleware) {
-      midd = midd.concat(layout.middleware)
+  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)
+  await _app.loadLayout(layout)
+  layout = _app.setLayout(layout)
+  // Set layout to __NUXT__
+  context.nuxt.layout = _app.layoutName
+  // Call middleware (layout + pages)
+  midd = []
+  if (layout.middleware) midd = midd.concat(layout.middleware)
+  Components.forEach((Component) => {
+    if (Component.options.middleware) {
+      midd = midd.concat(Component.options.middleware)
     }
-    Components.forEach((Component) => {
-      if (Component.options.middleware) {
-        midd = midd.concat(Component.options.middleware)
-      }
-    })
-    midd = midd.map((name) => {
-      if (typeof middleware[name] !== 'function') {
-        context.nuxt.error = context.error({ statusCode: 500, message: 'Unknown middleware ' + name })
-      }
-      return middleware[name]
-    })
-    if (context.nuxt.error) return
-    return promiseSeries(midd, ctx)
   })
-  .then(() => {
-    // Call .validate()
-    let isValid = true
-    Components.forEach((Component) => {
-      if (!isValid) return
-      if (typeof Component.options.validate !== 'function') return
-      isValid = Component.options.validate({
-        params: context.route.params || {},
-        query: context.route.query  || {}<%= (store ? ', store: ctx.store' : '') %>
+  midd = midd.map((name) => {
+    if (typeof middleware[name] !== 'function') {
+      context.nuxt.error = context.error({ statusCode: 500, message: 'Unknown middleware ' + name })
+    }
+    return middleware[name]
+  })
+  if (!context.nuxt.error) {
+    await middlewareSeries(midd, ctx)
+  }
+  if (context.redirected) return _app
+  // Call .validate()
+  let isValid = true
+  Components.forEach((Component) => {
+    if (!isValid) return
+    if (typeof Component.options.validate !== 'function') return
+    isValid = Component.options.validate({
+      params: context.route.params || {},
+      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) {
+      context.nuxt.serverRendered = false
+    }
+    // Call the 404 error by making the Components array empty
+    Components = []
+  }
+  // Call asyncData & fetch hooks on components matched by the route.
+  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)
+      // Call asyncData(context)
+      promise.then((asyncDataResult) => {
+        applyAsyncData(Component, asyncDataResult)
+        return asyncDataResult
       })
-    })
-    if (!isValid) {
-      // Don't server-render the page in generate mode
-      if (context._generate) {
-        context.nuxt.serverRendered = false
-      }
-      // 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 promises = []
-      if (Component.options.asyncData && typeof Component.options.asyncData === 'function') {
-        let promise = promisify(Component.options.asyncData, ctx)
-        // Call asyncData(context)
-        promise.then((asyncDataResult) => {
-          applyAsyncData(Component, asyncDataResult)
-          return asyncDataResult
-        })
-        promises.push(promise)
-      } else {
-        promises.push(null)
-      }
-      if (Component.options.fetch) {
-        promises.push(Component.options.fetch(ctx))
-      } else {
-        promises.push(null)
-      }
-      return Promise.all(promises)
-    }))
-  })
-  .then((res) => {
-    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')
-    <% } %>
-    // datas are the first row of each
-    context.nuxt.data = res.map((r) => (r[0] || {}))
+      promises.push(promise)
+    } 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)
+  }))
+  // If no Components found, returns 404
+  if (!Components.length) {
+    context.nuxt.error = context.error({ statusCode: 404, message: 'This page could not be found.' })
+  }
+  <% if (isDev) { %>
+    if (asyncDatas.length) debug('Data fetching ' + context.url + ': ' + (Date.now() - s) + 'ms')
+  <% } %>
+  // datas are the first row of each
+  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
-    if (!context.nuxt.error) {
-      return _app
-    }
-    // Load layout for error page
-    let 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' : '') %>
+  }
+  <%= (store ? '// Add the state from the vuex store' : '') %>
+  <%= (store ? 'context.nuxt.state = store.state' : '') %>
+  // If no error, return main app
+  if (!context.nuxt.error) {
     return _app
-  })
+  }
+  // Load layout for error page
+  layout = (typeof NuxtError.layout === 'function' ? NuxtError.layout(ctx) : NuxtError.layout)
+  context.nuxt.layout = layout || ''
+  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)
   })
 }