`guard()` hook

Environment: server (configurable).

The guard() hook enables you to protect pages from unauthorized and unexpected access.

// /pages/admin/+guard.js
 
import { render } from 'vike/abort'
 
// This guard() hook protects all pages /pages/admin/**/+Page.js
 
export async function guard(pageContext) {
  if (!pageContext.user.isAdmin) {
    throw render(401, "You aren't allowed to access this page.")
  }
}

Note that:

It can be asynchronous. (Unlike Route Functions which are always synchronous.)
A single guard() hook can apply to one or multiple pages.
It's always used together with throw render() or throw redirect(). (The guard() hook doesn't accept any return value.)

Execution order

The guard() hook is the first hook called after the routing is evaluated. Most notably, it's always called before the data() hook. See API > Hooks > Order.

We recommend using throw render() / throw redirect() before fetching data, whenever possible. (Unauthorized/unexpected data fetching can be problematic.)

If you want to guard your pages after or during fetching data, then use throw render() / throw redirect() inside your data() hook instead (or any another Vike hook).

For being able to use throw render() / throw redirect() inside UI components, see #1707: Use throw render() / throw redirect() inside React/Vue/Solid components.

Environment

The guard() hook is called in the same environment as data(). In other words, it's always called on the server-side unless you configure data() to run on the client-side.

If the page doesn't have any data() hook, then guard() executes in the environment where the routing is evaluated. See API > Hooks > Order.

For more control on where and when your guarding logic is executed, consider using throw render() / throw redirect() inside another hook than guard().

TypeScript

export { guard }
 
import type { GuardAsync } from 'vike/types'
import { render } from 'vike/abort'
 
const guard: GuardAsync = async (pageContext): ReturnType<GuardAsync> => {
  // ...
}

guard() hook

Execution order

Environment

TypeScript

See also

`guard()` hook