Nuxt 3中如何获取客户端存入localStorage的登录Token？解决构建时localStorage未定义错误

你遇到的问题是Nuxt3的SSR（服务端渲染）特性导致的——created钩子在服务端渲染阶段也会被执行，而服务端环境根本没有localStorage这个浏览器专属API，直接访问就会抛出"undefined"错误。虽然你存值时用了process.client判断环境，但取值时没做同样处理，这就是问题根源。

下面给你几个可行的解决方案，从简单修复到更优雅的最佳实践：

方案1：在取值时添加客户端环境判断 #

直接在created钩子中用process.client包裹localStorage相关操作，确保只有在浏览器环境下才执行：

async created() { 
  // 仅在客户端执行以下代码
  if (process.client) {
    const token = localStorage.getItem('token')
    // 先判断token是否存在，避免空值导致请求失败
    if (token) {
      const response = await axios.get('http://localhost:8000/api/user', { 
        headers: { 
          // 注意Bearer后面要加空格，否则认证格式无效
          Authorization: `Bearer ${token}` 
        } 
      }) 
      console.log(response)
    }
  }
}

方案2：改用客户端专属生命周期钩子 #

Vue的onMounted钩子只会在客户端执行，完全避开服务端渲染阶段，不用手动判断环境：

import { onMounted } from 'vue'

// 替换原来的created钩子
onMounted(async () => { 
  const token = localStorage.getItem('token')
  if (token) {
    const response = await axios.get('http://localhost:8000/api/user', { 
      headers: { 
        Authorization: `Bearer ${token}` 
      } 
    }) 
    console.log(response)
  }
})

方案3：使用Nuxt3推荐的useLocalStorage（最佳实践） #

Nuxt3默认集成了VueUse工具库，其中的useLocalStorage能自动处理SSR环境问题，无需手动判断process.client，还支持响应式绑定：

存值代码修改： #

import { useLocalStorage } from '@vueuse/core'

// 初始化localStorage中的token，默认值为空字符串
const token = useLocalStorage('token', '')

async handleSubmit() { 
  const response = await axios.post('http://localhost:8000/api/login', { 
    email: this.email, 
    password: this.password 
  }) 
  console.log(response); 
  notify({ title: response }) 
  // 直接赋值，自动同步到localStorage
  token.value = response.data.token 
  this.$router.push('/') 
}

取值代码修改： #

import { useLocalStorage } from '@vueuse/core'
import { onMounted } from 'vue'

const token = useLocalStorage('token', '')

onMounted(async () => { 
  if (token.value) {
    const response = await axios.get('http://localhost:8000/api/user', { 
      headers: { 
        Authorization: `Bearer ${token.value}` 
      } 
    }) 
    console.log(response)
  }
})

额外提示 #

• 注意Authorization头的格式：Bearer和token之间必须有一个空格，否则后端会识别为无效认证信息
• 建议在路由守卫中添加token校验，避免未登录用户直接访问需要权限的页面
• 如果需要在服务端也能获取token（比如SSR渲染权限页面），可以考虑把token存在Cookie中，配合Nuxt的useCookie composable使用

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