ON THIS PAGE 

useRoute Middleware Misleading

Dev Console Warning

2025-03-20


Description

Each /pages route loads as expected, but produces a Nuxt warning in the dev console:

router.js:12 [nuxt] Calling `useRoute` within middleware may lead to misleading results. Instead, use the (to, from) arguments passed to the middleware to access the new and old routes.

Authn middleware invokes the useAuth() composable:

//--------@/middleware/auth.ts------------------------------------------------->
export default defineNuxtRouteMiddleware((to, from) => {
    const { auth } = useAuth();

    if (!auth.value.isLoggedIn) {
      return navigateTo(`/login?redirect=${to.fullPath}`);
    }
});
//--------@/middleware/auth.ts------------------------------------------------->
//--------@/composables/useAuth.ts--------------------------------------------->
export const useAuth = () => {
    const auth = useState('auth', () => ({
      isLoggedIn: false
    }))

    const login = async (credentials) => {
      // Replaced authn code with plaintext password & hardcoded creds for this reproduction
      if (credentials.email === 'user@email.com' && credentials.password === 'somepassword') {
        auth.value.isLoggedIn = true;
        return true;
      }
      return false;
    }

    const logout = () => {
      auth.value.isLoggedIn = false;
    }

    return {
      auth,
      login,
      logout
    }
  }
//--------@/composables/useAuth.ts--------------------------------------------->

Explanation

See Nuxt Issue #226616 for bug report.

Copyright @ 2025 Anne Brown