如何在Nuxt 3中间件中访问useState实现登录路由拦截？

你的问题出在错误解构了useState返回的响应式Ref对象——useState返回的不是包含authenticated属性的普通对象，而是一个Ref实例，直接解构会拿到undefined，导致状态判断失效。

修正后的中间件代码 #

方式一：直接使用useState

export default defineNuxtRouteMiddleware((to, from) => {
  // 直接获取Ref对象，不要解构
  const authenticated = useState('authenticated');
  
  // 访问Ref的.value属性获取实际状态值
  if (!authenticated.value) {
    // 如果未登录，中止当前导航
    return abortNavigation();
    // 也可以跳转到登录页：return navigateTo('/login')
  }
})

方式二：使用自定义的useAuth composable

export default defineNuxtRouteMiddleware((to, from) => {
  // useAuth返回的就是Ref对象，直接赋值即可
  const authenticated = useAuth();
  
  if (!authenticated.value) {
    return abortNavigation();
  }
})

关键说明 #

• Nuxt3的useState返回的是响应式Ref对象，必须通过.value访问或修改其内部值；
• 自定义composableuseAuth本质上是对useState的封装，返回的同样是Ref对象，用法一致；
• 如果需要在服务端渲染时也能正确获取登录状态（比如从Cookie读取），可以在useAuth里补充初始化逻辑，比如：

  export const useAuth = () => {
    const authenticated = useState<boolean>('authenticated', () => {
      // 服务端从cookie取，客户端从localStorage取
      if (process.server) {
        const cookie = useCookie('auth_token');
        return !!cookie.value;
      } else {
        return !!localStorage.getItem('auth_token');
      }
    })
    return authenticated;
  }
  

内容的提问来源于stack exchange，提问作者guru