Middleware patterns with hooks in Svelte - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to define the hook function correctly.

Svelte

export const [1] = async ({ event, resolve }) => {
  return await resolve(event);
};

Drag options to blanks, or click blank then click option'

Ahandle

BuseEffect

ConMount

DbeforeUpdate

Attempts:

3 left

💡 Hint

Common Mistakes

Using lifecycle hooks like useEffect which are React-specific.

Importing hooks that do not exist in SvelteKit.

The handle function is the correct hook to implement middleware in SvelteKit.

2fill in blank

medium

Complete the code to define a middleware that logs each request method.

Svelte

export const handle = async ({ event, resolve }) => {
  console.log(event.request.[1]);
  return await resolve(event);
};

Drag options to blanks, or click blank then click option'

Aurl

Bheaders

Cmethod

Dbody

Attempts:

3 left

💡 Hint

Common Mistakes

Using url instead of method to log the HTTP verb.

Trying to access body directly without parsing.

The method property of the request object gives the HTTP method like GET or POST.

3fill in blank

hard

Fix the error in the middleware to correctly modify the response headers.

Svelte

export const handle = async ({ event, resolve }) => {
  const response = await resolve(event);
  response.headers.set('[1]', 'no-store');
  return response;
};

Drag options to blanks, or click blank then click option'

Acache control

BCache-Control

Ccache_control

Dcachecontrol

Attempts:

3 left

💡 Hint

Common Mistakes

Using lowercase or underscored header names which are invalid.

Adding spaces in header names.

HTTP headers are case-insensitive but should be written in standard format like Cache-Control.

4fill in blank

hard

Fill both blanks to create middleware that blocks requests without a token header.

Svelte

export const handle = async ({ event, resolve }) => {
  const token = event.request.headers.get('[1]');
  if (!token) {
    return new Response('Unauthorized', { status: [2] });
  }
  return await resolve(event);
};

Drag options to blanks, or click blank then click option'

Aauthorization

B401

C403

Dtoken

Attempts:

3 left

💡 Hint

Common Mistakes

Using wrong header names like token.

Returning status 403 which means forbidden, not unauthorized.

The middleware checks the authorization header and returns status 401 if missing.

5fill in blank

hard

Fill all three blanks to create middleware that adds a custom header and logs the response status.

Svelte

export const handle = async ({ event, resolve }) => {
  const response = await resolve(event);
  response.headers.set('[1]', '[2]');
  console.log('Response status:', response.[3]);
  return response;
};

Drag options to blanks, or click blank then click option'

AX-Custom-Header

BSvelteKit

Cstatus

DstatusText

Attempts:

3 left

💡 Hint

Common Mistakes

Using statusText instead of status to log the status code.

Forgetting to set the header with the correct name.

The middleware sets a custom header X-Custom-Header with value SvelteKit and logs the numeric status of the response.