Nuxt中间件中context参数未定义：获取User Agent时报错求助

Hey there! Let's break down why you're running into this error and fix it step by step. That "undefined" error usually boils down to either incorrect middleware setup or a mismatch between your Nuxt version and the code you're using.

First, Confirm Your Nuxt Version #

The example code you're using is for Nuxt 2—if you're on Nuxt 3, that's almost certainly why context is undefined (Nuxt 3 uses a completely different middleware structure). Let's cover both scenarios:

Case 1: You're Using Nuxt 2 #

1. Double-Check Middleware Registration

Your middleware won't receive the context parameter if it's not properly registered. Here's how to fix that:

• Global Registration (runs on every page): Add this to your nuxt.config.js:

  export default {
    router: {
      middleware: ['user_agent']
    }
  }
  

• Local Registration (runs only on specific pages): Add this to the page component (e.g., pages/index.vue):

  <script>
  export default {
    middleware: 'user_agent'
  }
  </script>
  

2. Hardening Your Code to Avoid Undefined Errors

Even with correct registration, edge cases (like SSR pre-rendering) can make req or navigator undefined. Update your middleware to handle these:

export default function (context) {
  // Handle server-side with optional chaining to avoid req undefined
  if (process.server) {
    context.userAgent = context.req?.headers['user-agent'] || 'Unknown Server User Agent';
  } else {
    // Check if navigator exists before accessing it
    context.userAgent = typeof navigator !== 'undefined' 
      ? navigator.userAgent 
      : 'Unknown Client User Agent';
  }
  console.log(context.userAgent);
}

Case 2: You're Using Nuxt 3 #

Nuxt 3 replaces the old context parameter with composables, so your Nuxt 2 code will throw undefined errors. Here's the correct approach:

Option 1: Use Built-in useUserAgent() Composable

Nuxt 3 has a built-in helper that handles server/client UA detection automatically:

// middleware/user-agent.global.js (add .global.js suffix for auto-global registration)
export default defineNuxtRouteMiddleware(() => {
  const userAgent = useUserAgent();
  console.log(userAgent.value);
  
  // Store the UA in app state if needed (e.g., Pinia or useState)
  const appState = useState('appState', () => ({ userAgent: '' }));
  appState.value.userAgent = userAgent.value;
});

Option 2: Manual Server/Client Handling

If you want to do it manually, use useRequestHeaders() for server-side:

export default defineNuxtRouteMiddleware((to, from) => {
  if (process.server) {
    const headers = useRequestHeaders();
    const serverUA = headers['user-agent'] || 'Unknown Server UA';
    console.log(serverUA);
  } else {
    const clientUA = navigator.userAgent;
    console.log(clientUA);
  }
});

For local middleware (only runs on specific pages), remove the .global.js suffix and register it in your page component:

<script setup>
definePageMeta({
  middleware: 'user-agent'
});
</script>

Quick Recap of Common Fixes #

• Make sure your middleware file is in the middleware/ directory with the correct name.
• Confirm you've registered the middleware globally or locally.
• Match your code to your Nuxt version (Nuxt 2 vs Nuxt 3 have very different middleware APIs).

内容的提问来源于stack exchange，提问作者Tadas V.