Nuxt+Spring Boot架构SPA中，安全存储非认证用户信息的方案咨询

针对你的场景（仅UI展示的姓名、邮箱，不参与认证授权，需跨会话持久化），以下是适配Nuxt的最优方案及细节：

1. 首选方案：LocalStorage + Nuxt状态管理（Pinia） #

为什么选它 #

• 完全满足持久化需求：LocalStorage数据会一直保存在浏览器中，除非用户手动清除或代码主动删除，适配浏览器关闭/刷新后仍可用的要求。
• 适配非敏感数据特性：你的数据仅用于UI展示，不涉及认证逻辑，LocalStorage的明文存储不会带来额外安全风险（前提是做好基础XSS防护）。
• Nuxt集成便捷：结合Pinia状态管理，可在全局组件中轻松调用用户信息，无需每次手动从LocalStorage读取。

Nuxt中实现步骤 #

1. 登录成功后获取并存储数据：
   登录接口返回JWT的同时，后端可额外返回用户姓名、邮箱（也可从JWT的Payload中解码提取，注意JWT Payload是Base64编码而非加密，不要在Payload中存放敏感数据）。

   // 登录成功后的处理逻辑
   const userStore = useUserStore();
   const { name, email } = await loginApi(credentials);
   // 存储到Pinia
   userStore.setUserInfo({ name, email });
   // 若不用Pinia，也可直接存LocalStorage
   localStorage.setItem('userUIInfo', JSON.stringify({ name, email }));
   

2. Pinia配合持久化插件：
   使用pinia-plugin-persistedstate让Pinia状态自动持久化到LocalStorage，无需手动操作：

   // stores/user.js
   import { defineStore } from 'pinia';
   
   export const useUserStore = defineStore('user', {
     state: () => ({
       name: '',
       email: ''
     }),
     actions: {
       setUserInfo(info) {
         this.name = info.name;
         this.email = info.email;
       }
     },
     persist: {
       key: 'userUIInfo',
       storage: localStorage,
     }
   });
   

3. 组件中调用：
   在需要展示头像和姓名的组件中直接获取：

   const userStore = useUserStore();
   // 直接使用userStore.name、userStore.email
   

2. 备选方案：非HttpOnly Cookie #

适用场景 #

如果项目对XSS防护要求极高，且数据量很小（姓名+邮箱通常满足），可选择非HttpOnly的Cookie：

• Cookie默认会随请求发送到后端，但你的数据不参与认证，后端可直接忽略这些字段。
• 可设置较长过期时间实现持久化。

Nuxt中实现 #

// 登录成功后设置Cookie
const setUserCookie = () => {
  const expires = new Date(Date.now() + 30 * 24 * 60 * 60 * 1000); // 30天过期
  useCookie('userName', { expires, secure: true, sameSite: 'strict' }).value = name;
  useCookie('userEmail', { expires, secure: true, sameSite: 'strict' }).value = email;
};

// 组件中读取
const userName = useCookie('userName').value;
const userEmail = useCookie('userEmail').value;

注意点 #

• 生产环境必须设置secure: true和sameSite: 'strict'，降低CSRF风险。
• Cookie有4KB大小限制，不适合存储更多数据。

关键安全注意事项 #

• XSS防护：无论用LocalStorage还是Cookie，都要防范XSS攻击。确保所有用户输入内容都经过转义，避免注入恶意脚本窃取存储的数据。
• 数据脱敏：不要在存储的UI数据中加入任何敏感信息（如手机号、身份证号），仅保留必要的姓名、邮箱。
• JWT分离：不建议依赖JWT Payload存储这些UI数据（除非后端已主动放入），优先通过登录接口单独返回，避免JWT泄露时连带泄露UI数据。

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