Vue.js中页面刷新后如何保留后端获取的用户数据？

方案1：利用浏览器本地存储（localStorage/sessionStorage） #

登录成功后，把用户核心数据（比如用户ID、昵称、token）存入localStorage或sessionStorage，页面刷新时直接从存储中读取，无需再次传入用户名密码。

实现步骤： #

1. 登录请求成功后存储数据：

// 登录按钮点击事件
const handleLogin = async () => {
  const res = await api.login(username.value, password.value);
  if (res.code === 200) {
    // 将用户数据和token存入localStorage
    localStorage.setItem('userInfo', JSON.stringify(res.data.user));
    localStorage.setItem('token', res.data.token);
    // 跳转到首页或其他页面
    router.push('/home');
  }
};

2. 在onMounted中读取存储数据：

import { onMounted, reactive } from 'vue';

const userInfo = reactive({});

onMounted(() => {
  // 页面刷新时从localStorage读取用户数据
  const savedUser = localStorage.getItem('userInfo');
  if (savedUser) {
    Object.assign(userInfo, JSON.parse(savedUser));
  }
});

注意事项： #

• 不要存储敏感信息（比如密码），敏感数据可加密后再存储；
• 用户退出时要清除存储：localStorage.removeItem('userInfo'); localStorage.removeItem('token');

方案2：状态管理库（Pinia/Vuex）配合持久化插件 #

用Pinia或Vuex管理全局状态，再配合持久化插件自动将状态同步到本地存储，刷新后自动恢复。

Pinia示例（Vue3）： #

1. 安装持久化插件：

npm install pinia-plugin-persistedstate

2. 创建带持久化的用户store：

// stores/user.js
import { defineStore } from 'pinia';

export const useUserStore = defineStore('user', {
  state: () => ({
    userInfo: {},
    token: ''
  }),
  actions: {
    setUserInfo(data) {
      this.userInfo = data.user;
      this.token = data.token;
    },
    clearUserInfo() {
      this.userInfo = {};
      this.token = '';
    }
  },
  // 开启持久化，默认存入localStorage
  persist: true
});

3. 登录时更新store：

import { useUserStore } from '@/stores/user';

const userStore = useUserStore();

const handleLogin = async () => {
  const res = await api.login(username.value, password.value);
  if (res.code === 200) {
    userStore.setUserInfo(res.data);
    router.push('/home');
  }
};

4. 组件中直接使用store数据，刷新后自动恢复：

import { useUserStore } from '@/stores/user';

const userStore = useUserStore();
// 直接使用userStore.userInfo即可，刷新后不会丢失

方案3：后端通过HttpOnly Cookie实现自动认证 #

登录后后端设置HttpOnly类型的认证Cookie（比如sessionId或JWT），刷新页面时前端调用获取用户信息接口，浏览器会自动携带Cookie，后端验证通过后返回用户数据，无需前端存储密码或手动传入用户名。

实现步骤： #

1. 登录接口处理（后端设置HttpOnly Cookie）：
   后端在登录成功后，响应头中设置Set-Cookie: token=xxx; HttpOnly; Path=/;，确保Cookie仅由浏览器自动携带，前端无法通过JS访问，更安全。

2. 前端在onMounted中调用获取用户信息接口：

import { onMounted, reactive } from 'vue';
import { useRouter } from 'vue-router';

const userInfo = reactive({});
const router = useRouter();

onMounted(async () => {
  try {
    // 调用获取用户信息的接口，浏览器自动携带认证Cookie
    const res = await api.getUserInfo();
    if (res.code === 200) {
      Object.assign(userInfo, res.data);
    } else {
      // 未认证，跳转到登录页
      router.push('/login');
    }
  } catch (err) {
    router.push('/login');
  }
});

优势： #

• 敏感数据（token）存储在HttpOnly Cookie中，避免XSS攻击；
• 无需前端手动管理认证信息，逻辑更简洁。

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