Nuxt JS刷新页面后auth.user对象为空的问题求助

问题原因 #

登录时通过setUser设置的用户对象仅存在内存中，刷新页面后未从持久化存储中恢复；同时配置中关闭了自动获取用户信息（autoFetch: false）且未配置用户信息的持久化存储，导致loggedIn因令牌存在为true，但user为空。

解决方案 #

1. 配置用户信息的持久化存储 #

修改nuxt.config.js中local策略的user配置，添加storage选项，让setUser自动将用户数据存入本地存储：

auth: {
  strategies: {
    local: {
      // 保留原有其他配置
      user: {
        property: false,
        autoFetch: false,
        // 添加存储配置，指定用户数据的存储前缀
        storage: {
          prefix: 'auth.user.'
        }
      },
      // 保留原有其他配置
    }
  }
}

2. 优化登录函数（统一async/await写法） #

避免await与then混用，确保用户数据正确设置：

async userLogin() {
  const res = await this.$auth.loginWith('local', { data: this.login })
  if (res.data.success) {
    const user = res.data.data.user
    this.$auth.setUser(user)
  }
}

3. 页面初始化时手动恢复用户数据（兜底方案） #

在plugins/auth.js中添加逻辑，当页面刷新后，如果已登录但用户对象为空，从本地存储读取并恢复：

export default function ({ $auth }) {
  // 检查是否已登录但用户对象为空
  if ($auth.loggedIn && Object.keys($auth.user).length === 0) {
    // 从localStorage读取之前存储的用户数据
    const storedUser = localStorage.getItem('auth.user')
    if (storedUser) {
      const user = JSON.parse(storedUser)
      $auth.setUser(user)
    }
  }
}

额外注意点 #

• 检查Laravel接口返回的刷新令牌字段，确保refreshToken的property配置正确（当前配置与token的property相同，若接口返回的刷新令牌字段不同，需修改为对应字段，例如data.authorization.refresh_token）。
• 确保本地存储的用户数据格式正确，setUser传入的是合法的用户对象。

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