feat: async validate() (#3797)

lib/app/client.js

@@ -292,11 +292,28 @@ async function render (to, from, next) {
 
     // Call .validate()
     let isValid = true
-    Components.forEach((Component) => {
+    let validationError
-      if (!isValid) return
+    try {
-      if (typeof Component.options.validate !== 'function') return
+      for (const Component of Components) {
-      isValid = Component.options.validate(app.context)
+        if (typeof Component.options.validate !== 'function') {
+          continue
+        }
+  
+        isValid = await Component.options.validate(app.context)
+  
+        if (!isValid) {
+          break
+        }
+      }
+    } catch (validationError) {
+      // ...If .validate() threw an error
+      this.error({
+        statusCode: validationError.statusCode || '500',
+        message: validationError.message
       })
+      return next()
+    }
+
     // ...If .validate() returned false
     if (!isValid) {
       this.error({ statusCode: 404, message: `<%= messages.error_404 %>` })

lib/app/server.js

@@ -154,11 +154,28 @@ export default async (ssrContext) => {
   ** Call .validate()
   */
   let isValid = true
-  Components.forEach((Component) => {
+  let validationError
-    if (!isValid) return
+  try {
-    if (typeof Component.options.validate !== 'function') return
+    for (const Component of Components) {
-    isValid = Component.options.validate(app.context)
+      if (typeof Component.options.validate !== 'function') {
+        continue
+      }
+
+      isValid = await Component.options.validate(app.context)
+
+      if (!isValid) {
+        break
+      }
+    }
+  } catch (validationError) {
+    // ...If .validate() threw an error
+    app.context.error({
+      statusCode: validationError.statusCode || '500',
+      message: validationError.message
     })
+    return renderErrorPage()
+  }
+
   // ...If .validate() returned false
   if (!isValid) {
     // Don't server-render the page in generate mode

test/e2e/basic.browser.test.js

@@ -123,12 +123,27 @@ describe('basic browser', () => {
     expect(error.message).toBe('This page could not be found')
   })
 
+  test('/validate-async should display a 404', async () => {
+    await page.nuxt.navigate('/validate-async')
+
+    const error = await page.nuxt.errorData()
+
+    expect(error.statusCode).toBe(404)
+    expect(error.message).toBe('This page could not be found')
+  })
+
   test('/validate?valid=true', async () => {
     await page.nuxt.navigate('/validate?valid=true')
 
     expect(await page.$text('h1')).toBe('I am valid')
   })
 
+  test('/validate-async?valid=true', async () => {
+    await page.nuxt.navigate('/validate-async?valid=true')
+
+    expect(await page.$text('h1')).toBe('I am valid')
+  })
+
   test('/redirect', async () => {
     await page.nuxt.navigate('/redirect')
 

test/fixtures/basic/pages/validate-async.vue

@@ -0,0 +1,15 @@
+<template>
+  <h1>I am valid</h1>
+</template>
+
+<script>
+export default {
+  validate({ query }) {
+    return new Promise((resolve) => {
+      setTimeout(() => {
+        resolve(Boolean(query.valid))
+      }, 500)
+    })
+  }
+}
+</script>

test/unit/basic.ssr.test.js

@@ -96,11 +96,21 @@ describe('basic ssr', () => {
     expect(html.includes('This page could not be found')).toBe(true)
   })
 
+  test('/validate-async should display a 404', async () => {
+    const { html } = await nuxt.renderRoute('/validate-async')
+    expect(html.includes('This page could not be found')).toBe(true)
+  })
+
   test('/validate?valid=true', async () => {
     const { html } = await nuxt.renderRoute('/validate?valid=true')
     expect(html.includes('<h1>I am valid</h1>')).toBe(true)
   })
 
+  test('/validate-async?valid=true', async () => {
+    const { html } = await nuxt.renderRoute('/validate-async?valid=true')
+    expect(html.includes('<h1>I am valid</h1>')).toBe(true)
+  })
+
   test('/before-enter', async () => {
     const { html } = await nuxt.renderRoute('/before-enter')
     expect(html.includes('<h1>Index page</h1>')).toBe(true)