mirror of
https://github.com/nuxt/nuxt.git
synced 2024-11-11 16:43:55 +00:00
Fix middleware on server-side
This commit is contained in:
parent
5d4f289911
commit
4b675e3357
@ -1,3 +1,4 @@
|
|||||||
export default function ({ store, route }) {
|
export default function ({ store, route, redirect }) {
|
||||||
store.commit('ADD_VISIT', route.path)
|
store.commit('ADD_VISIT', route.path)
|
||||||
|
if (route.fullPath === '/') return redirect('/foo')
|
||||||
}
|
}
|
||||||
|
@ -12,6 +12,7 @@
|
|||||||
<script>
|
<script>
|
||||||
export default {
|
export default {
|
||||||
asyncData ({ store, route, userAgent }) {
|
asyncData ({ store, route, userAgent }) {
|
||||||
|
console.log('Call async data', route.fullPath)
|
||||||
return {
|
return {
|
||||||
userAgent,
|
userAgent,
|
||||||
slugs: [
|
slugs: [
|
||||||
|
@ -3,7 +3,7 @@
|
|||||||
import Vue from 'vue'
|
import Vue from 'vue'
|
||||||
import middleware from './middleware'
|
import middleware from './middleware'
|
||||||
import { app, router<%= (store ? ', store' : '') %>, NuxtError } from './index'
|
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 noopData = () => { return {} }
|
||||||
const noopFetch = () => {}
|
const noopFetch = () => {}
|
||||||
let _lastPaths = []
|
let _lastPaths = []
|
||||||
@ -77,7 +77,7 @@ function callMiddleware (Components, context, layout) {
|
|||||||
return middleware[name]
|
return middleware[name]
|
||||||
})
|
})
|
||||||
if (unknownMiddleware) return
|
if (unknownMiddleware) return
|
||||||
return promiseSeries(midd, context)
|
return middlewareSeries(midd, context)
|
||||||
}
|
}
|
||||||
|
|
||||||
function render (to, from, next) {
|
function render (to, from, next) {
|
||||||
|
@ -1,14 +1,13 @@
|
|||||||
'use strict'
|
'use strict'
|
||||||
|
|
||||||
const debug = require('debug')('nuxt:render')
|
|
||||||
debug.color = 4 // force blue color
|
|
||||||
import Vue from 'vue'
|
import Vue from 'vue'
|
||||||
|
|
||||||
import { stringify } from 'querystring'
|
import { stringify } from 'querystring'
|
||||||
import { omit } from 'lodash'
|
import { omit } from 'lodash'
|
||||||
import middleware from './middleware'
|
import middleware from './middleware'
|
||||||
import { app, router<%= (store ? ', store' : '') %>, NuxtError } from './index'
|
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 isDev = <%= isDev %>
|
||||||
const _app = new Vue(app)
|
const _app = new Vue(app)
|
||||||
@ -18,7 +17,7 @@ const _app = new Vue(app)
|
|||||||
// state of our application before actually rendering it.
|
// state of our application before actually rendering it.
|
||||||
// Since data fetching is async, this function is expected to
|
// Since data fetching is async, this function is expected to
|
||||||
// return a Promise that resolves to the app instance.
|
// return a Promise that resolves to the app instance.
|
||||||
export default context => {
|
export default async (context) => {
|
||||||
// Add store to the context
|
// Add store to the context
|
||||||
<%= (store ? 'context.store = store' : '') %>
|
<%= (store ? 'context.store = store' : '') %>
|
||||||
// Nuxt object
|
// Nuxt object
|
||||||
@ -47,180 +46,137 @@ export default context => {
|
|||||||
|
|
||||||
<%= (isDev ? 'const s = isDev && Date.now()' : '') %>
|
<%= (isDev ? 'const s = isDev && Date.now()' : '') %>
|
||||||
let ctx = null
|
let ctx = null
|
||||||
let componentsLoaded = false
|
|
||||||
let Components = []
|
let Components = []
|
||||||
let promises = getMatchedComponents(router.match(context.url)).map((Component) => {
|
let promises = getMatchedComponents(router.match(context.url)).map((Component) => {
|
||||||
return new Promise((resolve, reject) => {
|
return new Promise((resolve, reject) => {
|
||||||
const _resolve = (Component) => {
|
const _resolve = (Component) => resolve(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
|
|
||||||
}
|
|
||||||
resolve(Component)
|
|
||||||
}
|
|
||||||
Component().then(_resolve).catch(reject)
|
Component().then(_resolve).catch(reject)
|
||||||
})
|
})
|
||||||
})
|
})
|
||||||
return Promise.all(promises)
|
try {
|
||||||
.then((_Components) => {
|
Components = await Promise.all(promises)
|
||||||
componentsLoaded = true
|
} catch (err) {
|
||||||
Components = _Components
|
// Throw back error to renderRoute()
|
||||||
// set router's location
|
throw err
|
||||||
return new Promise((resolve) => {
|
}
|
||||||
router.push(context.url, resolve)
|
// set router's location
|
||||||
})
|
await new Promise((resolve) => {
|
||||||
|
router.push(context.url, resolve)
|
||||||
})
|
})
|
||||||
.then(() => {
|
// Add route to the context
|
||||||
// Add route to the context
|
context.route = router.currentRoute
|
||||||
context.route = router.currentRoute
|
// Update context
|
||||||
// Update context
|
ctx = getContext(context)
|
||||||
ctx = getContext(context)
|
// nuxtServerInit
|
||||||
// nuxtServerInit
|
<% if (store) { %>
|
||||||
<% if (store) { %>
|
let promise = (store._actions && store._actions.nuxtServerInit ? store.dispatch('nuxtServerInit', omit(getContext(context), 'redirect', 'error')) : null)
|
||||||
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()
|
||||||
if (!promise || (!(promise instanceof Promise) && (typeof promise.then !== 'function'))) promise = Promise.resolve()
|
<% } else { %>
|
||||||
<% } else { %>
|
let promise = Promise.resolve()
|
||||||
let promise = Promise.resolve()
|
<% } %>
|
||||||
<% } %>
|
await promise
|
||||||
return promise
|
// Call global middleware (nuxt.config.js)
|
||||||
})
|
let midd = <%= serialize(router.middleware, { isJSON: true }) %>
|
||||||
.then(() => {
|
midd = midd.map((name) => {
|
||||||
// Sanitize Components
|
if (typeof middleware[name] !== 'function') {
|
||||||
Components = Components.map((Component) => {
|
context.nuxt.error = context.error({ statusCode: 500, message: 'Unknown middleware ' + name })
|
||||||
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)
|
|
||||||
}
|
}
|
||||||
return _app.loadLayout(layout).then(() => _app.setLayout(layout))
|
return middleware[name]
|
||||||
})
|
})
|
||||||
.then((layout) => {
|
if (!context.nuxt.error) {
|
||||||
// Set layout to __NUXT__
|
await middlewareSeries(midd, ctx)
|
||||||
context.nuxt.layout = _app.layoutName
|
}
|
||||||
// Call middleware (layout + pages)
|
if (context.redirected) return _app
|
||||||
let midd = []
|
// Set layout
|
||||||
if (layout.middleware) {
|
let layout = Components.length ? Components[0].options.layout : NuxtError.layout
|
||||||
midd = midd.concat(layout.middleware)
|
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(() => {
|
midd = midd.map((name) => {
|
||||||
// Call .validate()
|
if (typeof middleware[name] !== 'function') {
|
||||||
let isValid = true
|
context.nuxt.error = context.error({ statusCode: 500, message: 'Unknown middleware ' + name })
|
||||||
Components.forEach((Component) => {
|
}
|
||||||
if (!isValid) return
|
return middleware[name]
|
||||||
if (typeof Component.options.validate !== 'function') return
|
})
|
||||||
isValid = Component.options.validate({
|
if (!context.nuxt.error) {
|
||||||
params: context.route.params || {},
|
await middlewareSeries(midd, ctx)
|
||||||
query: context.route.query || {}<%= (store ? ', store: ctx.store' : '') %>
|
}
|
||||||
|
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
|
||||||
})
|
})
|
||||||
})
|
promises.push(promise)
|
||||||
if (!isValid) {
|
} else promises.push(null)
|
||||||
// Don't server-render the page in generate mode
|
// call fetch(context)
|
||||||
if (context._generate) {
|
if (Component.options.fetch) promises.push(Component.options.fetch(ctx))
|
||||||
context.nuxt.serverRendered = false
|
else promises.push(null)
|
||||||
}
|
return Promise.all(promises)
|
||||||
// Call the 404 error by making the Components array empty
|
}))
|
||||||
Components = []
|
// If no Components found, returns 404
|
||||||
return _app
|
if (!Components.length) {
|
||||||
}
|
context.nuxt.error = context.error({ statusCode: 404, message: 'This page could not be found.' })
|
||||||
// Call asyncData & fetch hooks on components matched by the route.
|
}
|
||||||
return Promise.all(Components.map((Component) => {
|
<% if (isDev) { %>
|
||||||
let promises = []
|
if (asyncDatas.length) debug('Data fetching ' + context.url + ': ' + (Date.now() - s) + 'ms')
|
||||||
if (Component.options.asyncData && typeof Component.options.asyncData === 'function') {
|
<% } %>
|
||||||
let promise = promisify(Component.options.asyncData, ctx)
|
// datas are the first row of each
|
||||||
// Call asyncData(context)
|
context.nuxt.data = asyncDatas.map((r) => (r[0] || {}))
|
||||||
promise.then((asyncDataResult) => {
|
// If an error occured in the execution
|
||||||
applyAsyncData(Component, asyncDataResult)
|
if (_app.$options._nuxt.err) {
|
||||||
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] || {}))
|
|
||||||
context.nuxt.error = _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' : '') %>
|
<%= (store ? '// Add the state from the vuex store' : '') %>
|
||||||
// If no error, return main app
|
<%= (store ? 'context.nuxt.state = store.state' : '') %>
|
||||||
if (!context.nuxt.error) {
|
// If no error, return main app
|
||||||
return _app
|
if (!context.nuxt.error) {
|
||||||
}
|
|
||||||
// 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' : '') %>
|
|
||||||
return _app
|
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
|
||||||
}
|
}
|
||||||
|
@ -1,4 +1,5 @@
|
|||||||
'use strict'
|
'use strict'
|
||||||
|
import Vue from 'vue'
|
||||||
import { app } from './index'
|
import { app } from './index'
|
||||||
|
|
||||||
const noopData = () => ({})
|
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) {
|
export function getMatchedComponents (route) {
|
||||||
return [].concat.apply([], route.matched.map(function (m) {
|
return [].concat.apply([], route.matched.map(function (m) {
|
||||||
return Object.keys(m.components).map(function (key) {
|
return Object.keys(m.components).map(function (key) {
|
||||||
@ -54,7 +70,7 @@ export function getContext (context) {
|
|||||||
ctx.query = ctx.route.query || {}
|
ctx.query = ctx.route.query || {}
|
||||||
ctx.redirect = function (status, path, query) {
|
ctx.redirect = function (status, path, query) {
|
||||||
if (!status) return
|
if (!status) return
|
||||||
ctx._redirected = true
|
ctx._redirected = true // Used in middleware
|
||||||
// if only 1 or 2 arguments: redirect('/') or redirect('/', { foo: 'bar' })
|
// if only 1 or 2 arguments: redirect('/') or redirect('/', { foo: 'bar' })
|
||||||
if (typeof status === 'string' && (typeof path === 'undefined' || typeof path === 'object')) {
|
if (typeof status === 'string' && (typeof path === 'undefined' || typeof path === 'object')) {
|
||||||
query = path || {}
|
query = path || {}
|
||||||
@ -82,13 +98,13 @@ export function getContext (context) {
|
|||||||
return ctx
|
return ctx
|
||||||
}
|
}
|
||||||
|
|
||||||
export function promiseSeries (promises, context) {
|
export function middlewareSeries (promises, context) {
|
||||||
if (!promises.length || context._redirected) {
|
if (!promises.length || context._redirected) {
|
||||||
return Promise.resolve()
|
return Promise.resolve()
|
||||||
}
|
}
|
||||||
return promisify(promises[0], context)
|
return promisify(promises[0], context)
|
||||||
.then(() => {
|
.then(() => {
|
||||||
return promiseSeries(promises.slice(1), context)
|
return middlewareSeries(promises.slice(1), context)
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
|
Loading…
Reference in New Issue
Block a user