Why Protected routes and middleware in Astro? - Purpose & Use Cases

The Big Idea

What if one missed check lets strangers see your private data? Middleware stops that risk effortlessly.

The Scenario

Imagine building a website where some pages should only be seen by logged-in users, like a personal dashboard or settings page. You try to check user access on every page manually by adding code everywhere.

The Problem

Manually checking user access on every page is tiring and easy to forget. If you miss one page, anyone can see private info. It also makes your code messy and hard to update.

The Solution

Protected routes and middleware let you centralize access checks. Middleware runs before your pages load, blocking unauthorized users automatically. This keeps your code clean and secure.

Before vs After

✗ Before

if (!user.isLoggedIn) { redirect('/login') } // repeated in every page

✓ After

middleware(() => { if (!user.isLoggedIn) redirect('/login') }) // one place for all routes

What It Enables

You can easily protect many pages with one simple setup, ensuring only the right users see sensitive content.

Real Life Example

Think of a gym where only members can enter certain rooms. Middleware is like a security guard checking membership at the door, so you don't need a guard in every room.

Key Takeaways

Manual checks on every page are error-prone and messy.

Middleware centralizes access control for protected routes.

This keeps your site secure and your code clean.

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