diff --git a/docs/content/3.api/3.utils/abort-navigation.md b/docs/content/3.api/3.utils/abort-navigation.md index 9271f599132..9b636c5ab13 100644 --- a/docs/content/3.api/3.utils/abort-navigation.md +++ b/docs/content/3.api/3.utils/abort-navigation.md @@ -1,16 +1,68 @@ # `abortNavigation` +`abortNavigation` is a helper function that prevents navigation from taking place and throws an error if one is set as a parameter. + +::alert{type="warning"} +`abortNavigation` is only usable inside a [route middleware handler](/guide/directory-structure/middleware). +:: + +## Type + ```ts abortNavigation(err?: Error | string): false ``` -* **err**: Optional error to be thrown by `abortNavigation()`. +## Parameters -::alert{type="warning"} -`abortNavigation()` is only usable inside a [route middleware handler](/guide/directory-structure/middleware). -:: +### `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: -Inside a route middleware handler, `abortNavigation()` will abort navigation, and throw an error if one is set as a parameter. +```ts [middleware/auth.ts] +export default defineNuxtRouteMiddleware((to, from) => { + const user = useState('user') + + if (!user.value.isAuthorized) { + return abortNavigation() + } + + 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 auth = useState('auth') + + if (!user.value.isAuthorized) { + 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) { + abortNavigation(err) + } +}) +``` ::ReadMore{link="/guide/features/routing"} ::