forked from nuxt/framework
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
fix(nuxt): show client error if no page matches after validate fails …
…(#18978)
- Loading branch information
Showing
6 changed files
with
77 additions
and
7 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,11 +1,38 @@ | ||
import { defineNuxtRouteMiddleware } from '#app/composables/router' | ||
import { createError, showError } from '#app/composables/error' | ||
import { callWithNuxt, useNuxtApp } from '#app/nuxt' | ||
import { defineNuxtRouteMiddleware, useRouter } from '#app/composables/router' | ||
|
||
export default defineNuxtRouteMiddleware(async (to) => { | ||
if (!to.meta?.validate) { return } | ||
|
||
const nuxtApp = useNuxtApp() | ||
const router = useRouter() | ||
|
||
const result = await Promise.resolve(to.meta.validate(to)) | ||
if (result === true) { | ||
return | ||
} | ||
return result | ||
if (process.server) { | ||
return result | ||
} | ||
const error = createError({ | ||
statusCode: 404, | ||
statusMessage: `Page Not Found: ${to.fullPath}` | ||
}) | ||
const unsub = router.beforeResolve((final) => { | ||
unsub() | ||
if (final === to) { | ||
const unsub = router.afterEach(async () => { | ||
unsub() | ||
await callWithNuxt(nuxtApp, showError, [error]) | ||
// We pretend to have navigated to the invalid route so | ||
// that the user can return to the previous page with | ||
// the back button. | ||
window.history.pushState({}, '', to.fullPath) | ||
}) | ||
// We stop the navigation immediately before it resolves | ||
// if there is no other route matching it. | ||
return false | ||
} | ||
}) | ||
}) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,15 @@ | ||
<template> | ||
<div> | ||
<div> | ||
<h1>{{ error?.message }}</h1> | ||
This is the error page 😱 | ||
</div> | ||
</div> | ||
</template> | ||
|
||
<script setup lang="ts"> | ||
import type { NuxtError } from '#app' | ||
defineProps({ | ||
error: Object as () => NuxtError | ||
}) | ||
</script> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,18 @@ | ||
<template> | ||
<div> | ||
<div>navigate-to-forbidden.vue</div> | ||
<NuxtLink to="/forbidden"> | ||
should throw a 404 error | ||
</NuxtLink> | ||
<NuxtLink to="/some-404"> | ||
should be caught by catchall | ||
</NuxtLink> | ||
</div> | ||
</template> | ||
|
||
<script setup lang="ts"> | ||
definePageMeta({ | ||
middleware: ['override'], | ||
validate: to => to.path !== '/forbidden' | ||
}) | ||
</script> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters