页面刷新后需保留用户信息，使用vuex-persistedstate是否为合理实践？

方案合规性结论 #

用vuex-persistedstate做Vuex状态持久化是符合前端开发规范的，属于社区广泛使用的成熟解决方案，完全可以用来解决刷新页面Vuex数据丢失的问题。你当前选择Cookie作为存储介质、开启secure配置的做法也符合安全开发要求，比默认存在localStorage的方案更适合存储登录态相关数据。

现有代码优化建议 #

你当前的配置默认会持久化整个Vuex的state，其中userLoading、userError属于临时请求状态，不需要持久化存储，刷新后保留反而会导致异常的状态展示（比如刷新后还残留之前的登录错误提示），建议添加paths参数指定只持久化需要保留的user字段：

plugins: [
  createPersistedState({
    paths: ['user'], // 只持久化user字段，忽略其他state
    storage: {
      getItem: key => Cookies.get(key),
      setItem: (key, value) =>
        Cookies.set(key, value, { expires: 3, secure: true, sameSite: 'strict' }), // 新增sameSite配置防CSRF
      removeItem: key => Cookies.remove(key),
    },
  }),
]

额外安全注意事项 #

• 不要在user字段中存储敏感信息（比如明文密码、核心权限凭证等），Cookie存储的内容对用户是可见的
• 接口请求时不要完全信任Vuex中存储的用户状态，后端需要对每个携带JWT的请求做合法性校验，避免伪造的持久化数据带来安全风险
• 如果你的站点有跨域请求需求，可以把sameSite调整为lax，平衡安全和兼容性

可选替代方案 #

如果你对用户数据的实时性要求很高，也可以不用全量持久化用户信息，改为在页面初始化/路由守卫中调用获取当前用户信息的接口，重新给Vuex的user赋值，这种方案数据准确性更高，但会多一次请求开销，可以根据业务场景自行选择。

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