mirror of
https://github.com/nuxt/nuxt.git
synced 2024-11-14 18:13:54 +00:00
f26a801775
Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com> Co-authored-by: Daniel Roe <daniel@roe.dev>
74 lines
1.8 KiB
Markdown
74 lines
1.8 KiB
Markdown
---
|
|
title: 'abortNavigation'
|
|
description: 'abortNavigation is a helper function that prevents navigation from taking place and throws an error if one is set as a parameter.'
|
|
links:
|
|
- label: Source
|
|
icon: i-simple-icons-github
|
|
to: https://github.com/nuxt/nuxt/blob/main/packages/nuxt/src/app/composables/router.ts
|
|
size: xs
|
|
---
|
|
|
|
::callout{color="amber" icon="i-ph-warning-duotone"}
|
|
`abortNavigation` is only usable inside a [route middleware handler](/docs/guide/directory-structure/middleware).
|
|
::
|
|
|
|
## Type
|
|
|
|
```ts
|
|
abortNavigation(err?: Error | string): false
|
|
```
|
|
|
|
## Parameters
|
|
|
|
### `err`
|
|
|
|
- **Type**: [`Error`](https://developer.mozilla.org/pl/docs/Web/JavaScript/Reference/Global_Objects/Error) | `string`
|
|
|
|
Optional error to be thrown by `abortNavigation`.
|
|
|
|
## Examples
|
|
|
|
The example below shows how you can use `abortNavigation` in a route middleware to prevent unauthorized route access:
|
|
|
|
```ts [middleware/auth.ts]
|
|
export default defineNuxtRouteMiddleware((to, from) => {
|
|
const user = useState('user')
|
|
|
|
if (!user.value.isAuthorized) {
|
|
return abortNavigation()
|
|
}
|
|
|
|
if (to.path !== '/edit-post') {
|
|
return navigateTo('/edit-post')
|
|
}
|
|
})
|
|
```
|
|
|
|
### `err` as a String
|
|
|
|
You can pass the error as a string:
|
|
|
|
```ts [middleware/auth.ts]
|
|
export default defineNuxtRouteMiddleware((to, from) => {
|
|
const user = useState('user')
|
|
|
|
if (!user.value.isAuthorized) {
|
|
return abortNavigation('Insufficient permissions.')
|
|
}
|
|
})
|
|
```
|
|
|
|
### `err` as an Error Object
|
|
|
|
You can pass the error as an [`Error`](https://developer.mozilla.org/pl/docs/Web/JavaScript/Reference/Global_Objects/Error) object, e.g. caught by the `catch`-block:
|
|
|
|
```ts [middleware/auth.ts]
|
|
export default defineNuxtRouteMiddleware((to, from) => {
|
|
try {
|
|
/* code that might throw an error */
|
|
} catch (err) {
|
|
return abortNavigation(err)
|
|
}
|
|
})
|
|
```
|