Nuxt3服务端初始化时useState失效问题求助

问题核心原因 #

1. useFetch回调脱离上下文：onResponse/onResponseError是异步回调，服务端环境中这些回调执行时会脱离当前请求的Nuxt上下文，导致无法正确访问和修改useState。
2. 服务端错误使用客户端API：在服务端插件里调用useRouter是错误的，服务端跳转需用Nuxt提供的navigateTo方法。
3. useState使用方式错误：直接调用useState('key', () => value)仅在状态未初始化时设置初始值，后续调用无法修改状态，必须通过.value属性更新。

修复步骤及代码示例 #

1. 改用useFetch返回值处理响应 #

放弃onResponse回调，直接通过await useFetch的返回值处理响应，确保在同一个请求上下文内操作状态。

2. 替换useRouter为navigateTo #

服务端环境中使用navigateTo进行跳转，且必须返回该导航指令让Nuxt处理。

3. 正确更新useState值 #

先获取useState的引用，再通过.value属性修改状态值，而非重复调用useState。

修改后的完整代码：

export default defineNuxtPlugin(async () => {
  const { REST_API_URL } = useRuntimeConfig();
  const token = useCookie('token')?.value;

  console.log('this is token:', token);

  if (token && token.length > 0) {
    console.log('execute validation token');

    const { response } = await useFetch(REST_API_URL + '/auth/validate', {
      method: 'POST',
      headers: {
        'Authorization': 'Bearer ' + token,
        'Content-Type': 'application/json'
      }
    });

    if (response?.status === 200) {
      const payload = parseJwt(token);
      console.log("payload:", payload);

      // 获取状态引用并更新值
      const isConnected = useState('isConnected');
      const username = useState('username');
      const role = useState('role');

      isConnected.value = true;
      username.value = payload.username;
      role.value = payload.role;

      console.log('token is valid');
      console.log('username state:', username.value);
    } else {
      console.log('token is not valid or expired');
      // 重置状态
      const isConnected = useState('isConnected');
      const username = useState('username');
      const role = useState('role');

      isConnected.value = false;
      username.value = null;
      role.value = null;

      if (response?.status === 400) {
        console.error('token expired or invalid');
      } else {
        console.error('internal issue problem');
      }
      // 服务端跳转，需返回导航指令
      return navigateTo("/");
    }
  } else {
    console.log('No token registered');
  }
});

额外注意事项 #

• 确保parseJwt函数不依赖浏览器API（如window），因为该插件运行在服务端。
• 服务端设置的useState会自动序列化并传递到客户端，实现状态 hydration，客户端组件可直接使用这些状态。
• 服务端插件中执行导航必须返回navigateTo的结果，否则Nuxt无法处理跳转动作。

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