Protected routes and middleware in Astro - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is the purpose of middleware in Astro framework?

Middleware in Astro runs code before a route is processed. It can check user status, modify requests, or redirect users. It helps protect routes by controlling access.

beginner

How do protected routes work in Astro?

Protected routes only allow access if certain conditions are met, like user login. Middleware checks these conditions and can redirect unauthorized users to login pages.

beginner

Which Astro feature lets you run code before a page loads to check user permissions?

Astro middleware lets you run code before a page loads. This is where you check if a user is logged in or has permission to see the page.

intermediate

What happens if middleware detects a user is not authorized for a protected route?

Middleware can redirect the user to a login page or show an error message. This stops unauthorized access to protected content.

intermediate

Why is it important to use middleware for route protection instead of just hiding links in the UI?

Hiding links only changes what users see but does not stop them from typing URLs directly. Middleware checks on the server side to truly block unauthorized access.

What is the main role of middleware in Astro for protected routes?

A To check user access before loading a page

B To style the page layout

C To fetch data after page loads

D To create UI buttons

Middleware runs before the page loads to check if the user has permission to access the route.

If a user is not logged in, what should middleware do on a protected route?

A Show the protected content anyway

B Redirect to login page

C Do nothing and load the page

D Delete the user account

Middleware should redirect unauthorized users to the login page to protect the route.

Which of these is NOT a reason to use middleware for route protection?

A To prevent unauthorized access

B To redirect users based on login status

C To improve server security

D To hide links in the UI

Hiding links in the UI does not protect routes; middleware is needed for real protection.

Where does middleware run in the Astro framework?

A Only on the client side

B After the page is fully loaded

C Before the route handler processes the request

D Inside CSS files

Middleware runs before the route handler to control access and modify requests.

What is a common action middleware takes when a user is authorized?

A Allow the request to continue to the page

B Redirect to an error page

C Log the user out

D Block the request

If the user is authorized, middleware lets the request continue to load the protected page.

Explain how middleware helps protect routes in Astro framework.

Think about what happens before a page shows up.

Describe why hiding links in the UI is not enough to protect routes and how middleware solves this.

Consider difference between what users see and what they can access.

Practice

1. What is the main purpose of middleware in Astro when protecting routes?

easy

A. To check user access before loading a page

B. To style the page content dynamically

C. To fetch data after the page loads

D. To optimize images on the page

Solution

1. Step 1: Understand middleware role

   Middleware runs before a page loads to perform checks or actions.

2. Step 2: Identify middleware use in protected routes

   It checks if a user has permission to access certain pages before showing them.

3. Final Answer:

   To check user access before loading a page -> Option A

4. Quick Check:

   Middleware checks access = D [OK]

Hint: Middleware runs first to check access before page loads [OK]

Common Mistakes:

• Thinking middleware styles pages
• Assuming middleware fetches data after load
• Confusing middleware with image optimization

2. Which syntax correctly defines a middleware matcher for protecting all routes under /dashboard in Astro?

easy

A. export const matcher = '/dashboard/*';

B. export const matcher = ['/dashboard/*'];

C. export const matcher = ['/dashboard'];

D. export const matcher = '/dashboard';

Solution

1. Step 1: Recall matcher syntax

   Matcher must be an array of strings specifying route patterns.

2. Step 2: Match all routes under /dashboard

   Using '/dashboard/*' inside an array matches all subpaths.

3. Final Answer:

   export const matcher = ['/dashboard/*']; -> Option B

4. Quick Check:

   Matcher is array with pattern string = A [OK]

Hint: Matcher must be an array of route strings [OK]

Common Mistakes:

• Using string instead of array for matcher
• Missing wildcard * to match subroutes
• Using exact path without wildcard for nested routes

3. Given this middleware code in Astro, what happens when a user visits /profile without a valid token?

export const matcher = ['/profile'];

export async function middleware({ request, redirect }) {
  const token = request.headers.get('authorization');
  if (!token) {
    return redirect('/login');
  }
  return;
}

medium

A. Middleware throws an error

B. User sees the /profile page

C. User is redirected to /login

D. User is redirected to /home

Solution

1. Step 1: Check token presence

   The middleware checks if the 'authorization' header exists in the request.

2. Step 2: Redirect if no token

   If token is missing, middleware redirects user to '/login'.

3. Final Answer:

   User is redirected to /login -> Option C

4. Quick Check:

   No token means redirect to /login = A [OK]

Hint: No token triggers redirect to login [OK]

Common Mistakes:

• Assuming user sees page without token
• Expecting error instead of redirect
• Redirecting to wrong path

4. Identify the error in this Astro middleware code meant to protect /admin routes:

export const matcher = '/admin/*';

export function middleware({ request, redirect }) {
  const user = request.headers.get('user');
  if (user !== 'admin') {
    redirect('/not-authorized');
  }
}

medium

A. request.headers.get does not exist

B. redirect should be called with await

C. middleware must be async function

D. matcher should be an array, not a string

Solution

1. Step 1: Check matcher syntax

   Matcher must be an array of strings, not a single string.

2. Step 2: Confirm redirect usage

   Redirect can be called synchronously; no await needed here.

3. Final Answer:

   matcher should be an array, not a string -> Option D

4. Quick Check:

   Matcher array required = C [OK]

Hint: Matcher must always be an array even for one route [OK]

Common Mistakes:

• Using string instead of array for matcher
• Thinking redirect needs await
• Confusing request.headers API

5. You want to protect both /dashboard and /settings routes using middleware in Astro. Which matcher setup correctly protects both paths and their subpaths?

hard

A. export const matcher = ['/dashboard/*', '/settings/*'];

B. export const matcher = ['/dashboard', '/settings'];

C. export const matcher = ['/dashboard*', '/settings*'];

D. export const matcher = ['/dashboard/**', '/settings/**'];

Solution

1. Step 1: Understand wildcard usage

   '/*' matches all subpaths under a route, ensuring protection of nested pages.

2. Step 2: Verify matcher array format

   Matcher must be an array of strings with correct wildcard patterns.

3. Final Answer:

   export const matcher = ['/dashboard/*', '/settings/*']; -> Option A

4. Quick Check:

   Array with '/*' wildcard protects subpaths = B [OK]

Hint: Use '/*' wildcard in array to protect all subroutes [OK]

Common Mistakes:

• Omitting wildcard to protect subpaths
• Using incorrect wildcard like '**'
• Using string instead of array for matcher