Nuxt通用模式下中间件console.log输出与process.server行为疑问

我来帮你拆解下这个问题的核心原因，以及对应的解决方案：

为什么process.server在直接访问路由时也会生效？ #

在Nuxt的通用模式下，页面会经历两个阶段的渲染：

• 当你直接访问/刷新页面时，Nuxt会先在服务端完成页面渲染，生成HTML后发送给浏览器，这时候你的中间件会先在服务端执行一遍，所以process.server会返回true。
• 当你通过路由切换（比如点击页面内的链接）时，这是客户端SPA式的导航，中间件只会在浏览器端执行，所以只有非process.server包裹的代码会运行。

这就是为什么你看到process.server的输出在两种场景下都出现，而其他代码只在路由切换时可见的原因。

如何实现从localStorage读数据+保护页面重定向？ #

你的需求核心是：读取浏览器的localStorage数据到store，同时在访问受保护页面时做重定向。但要注意，localStorage是浏览器专属API，服务端根本没有这个对象，所以必须把这部分逻辑限制在客户端执行。

这里给你一套可行的实现方案：

1. 编写认证中间件 #

在middleware/auth.js中编写如下逻辑：

export default function ({ store, redirect, route, req }) {
  // 服务端逻辑：如果用户认证信息存在cookie中，可以在这里解析（可选）
  if (process.server) {
    // 示例：从请求头的cookie中读取用户信息（需要自己实现解析逻辑或用库）
    const userCookie = req.headers.cookie?.split('; ').find(row => row.startsWith('user='))
    if (userCookie) {
      const user = JSON.parse(decodeURIComponent(userCookie.split('=')[1]))
      store.commit('auth/setUser', user)
    }
  }

  // 客户端逻辑：处理localStorage和页面重定向
  if (process.client) {
    // 从localStorage读取用户数据并存入store
    const savedUser = localStorage.getItem('user')
    if (savedUser) {
      store.commit('auth/setUser', JSON.parse(savedUser))
    }

    // 判断当前页面是否需要认证
    const requiresAuth = route.meta.some(meta => meta.requiresAuth)
    if (requiresAuth && !store.state.auth.user) {
      // 未登录则重定向到登录页
      redirect('/login')
    }
  }
}

2. 配置页面与中间件 #

• 在需要保护的页面组件中，添加meta标记：

  export default {
    meta: {
      requiresAuth: true
    }
  }
  

• 在nuxt.config.js中全局注册中间件（或者只在特定页面单独引用）：

  export default {
    router: {
      middleware: 'auth'
    }
  }
  

3. 关键注意事项 #

• 永远不要在process.server的代码块中调用localStorage，否则服务端渲染时会直接抛出错误。
• 如果希望服务端渲染时也能同步用户状态（避免页面加载后闪烁），建议把用户认证信息存在HttpOnly Cookie中，这样服务端可以通过请求头读取并初始化store。
• 你提到的process.cli应该是笔误，Nuxt中判断客户端环境的正确变量是process.client，process.cli是用于判断是否在Nuxt命令行工具环境中运行的。

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