Nuxt使用nuxt/auth模块刷新后setUser设置的用户数据丢失如何解决？

你这个问题的核心是nuxt/auth模块的默认机制导致的：当浏览器刷新页面时，nuxt/auth会自动从本地存储读取token校验登录状态，所以loggedIn仍为true；但你在配置中将endpoints.user设为了false，模块刷新后不会自动请求接口拉取用户信息，而Vuex本身是内存存储，刷新后数据会重置，所以user就变成了空对象。

这里提供两种常用的解决方案，你可以根据自己的后端情况选择：

方案1：配置用户信息获取接口（推荐） #

如果后端支持提供用户信息查询接口，直接修改nuxt.config.js里的auth配置，补全user端点即可，刷新时模块会自动携带token请求接口填充用户信息：

auth: {
  strategies: {
    local: {
      token: {
        property: "token",
        global: true,
      },
      redirect: {
          "login": "/account/login",
          "logout": "/",
          "home": "/page/ajouter-produit",
          "callback": false
      },
      endpoints: {
        login: { url: "http://localhost:5000/login", method: "post" },
        logout: false,
        // 补全用户信息获取接口，property根据你的接口返回结构调整，比如用户信息在返回体的data字段就写property: "data"
        user: { url: "http://localhost:5000/user/info", method: "get", property: "user" }
      }
    }
  }
},

配置完成后不需要修改业务代码，刷新时模块会自动完成用户信息拉取。

方案2：本地存储用户信息（无后端用户接口时使用） #

如果后端不提供用户查询接口，可以把非敏感的用户信息存在本地存储，刷新时手动读取填充到auth状态中：

1. 首先修改登录逻辑，登录成功后把用户信息存入localStorage：

// 原登录成功逻辑
this.$auth.setUser(response.data.user)
// 新增：把用户信息存入本地存储，注意不要存密码等敏感信息
localStorage.setItem('auth_user', JSON.stringify(response.data.user))

2. 新增客户端插件plugins/auth-persist.js，页面加载时自动读取本地存储的用户信息填充：

export default function ({ $auth }) {
  // 仅登录状态且用户信息为空时执行
  if ($auth.loggedIn && Object.keys($auth.user).length === 0) {
    const savedUser = localStorage.getItem('auth_user')
    if (savedUser) {
      $auth.setUser(JSON.parse(savedUser))
    }
  }
}

3. 在nuxt.config.js中注册这个客户端插件：

plugins: [
  { src: '~/plugins/auth-persist.js', mode: 'client' }
]

4. 可选补充：用户退出登录时记得清空本地存储的用户信息：

// 退出逻辑新增
localStorage.removeItem('auth_user')

• 本地存储只能保存非敏感的用户信息，禁止存储密码、支付信息等敏感内容
• 如果用户信息会在其他端修改，推荐使用方案1，能保证每次刷新拿到的都是最新的用户数据

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