前端开发|用户认证：vue中如何使用cookie管理和存储用户信息

前端开发 | 用户认证：Vue中如何使用Cookie管理和存储用户信息

场景引入

想象一下，你刚开发了一个漂亮的Vue应用，用户登录后可以查看个人资料、购物车或者收藏的内容，但每次刷新页面，用户又得重新登录，体验极差，这时候，你就需要一种方式在用户关闭浏览器后依然能记住他们的登录状态——Cookie就是解决这个问题的经典方案之一。

在Vue中，我们可以通过操作Cookie来存储用户信息，比如Token、用户名等，让用户下次访问时自动恢复登录状态，今天我们就来聊聊如何在Vue中高效管理和存储用户信息到Cookie里。

为什么选择Cookie？

Cookie是存储在用户浏览器中的小型文本数据，常用于会话管理、个性化设置等，相比localStorage和sessionStorage，Cookie有几个优势：

• 自动随请求发送：每次HTTP请求都会带上Cookie，适合存储会话ID或Token，方便后端验证。
• 可设置过期时间：可以控制Cookie的存活时间，比如7天免登录。
• 兼容性好：几乎所有浏览器都支持，老项目也能用。

Cookie也有缺点，比如存储大小有限（通常4KB左右），而且如果没设置HttpOnly和Secure，可能会有安全风险，不过合理使用的话，它仍然是用户认证的可靠选择。

Vue中操作Cookie的几种方式

在Vue里，我们通常会用第三方库来简化Cookie的操作，避免手动拼接字符串，以下是几种常见方法：

方法1：使用js-cookie库（推荐）

js-cookie是一个轻量级的库，API简单直观，适合大多数场景。

安装

npm install js-cookie

基本使用

import Cookies from 'js-cookie';
// 存储用户Token（默认会话级，关闭浏览器失效）
Cookies.set('user_token', 'abc123');
// 设置7天过期的Cookie
Cookies.set('username', '张三', { expires: 7 });
// 读取Cookie
const token = Cookies.get('user_token');
console.log(token); // 输出: abc123
// 删除Cookie
Cookies.remove('username');

进阶配置

// 设置Path和Secure（仅HTTPS生效）
Cookies.set('secure_token', 'xyz789', {
  expires: 1, // 1天后过期
  secure: true,
  path: '/dashboard' // 只有/dashboard路径能访问
});

方法2：原生JavaScript操作

如果不想引入额外库，也可以用原生API，但代码会稍显繁琐：

// 设置Cookie
document.cookie = `user_token=abc123; expires=${new Date(Date.now() + 86400e3).toUTCString()}; path=/`;
// 读取Cookie（需要手动解析）
const cookies = document.cookie.split(';').reduce((acc, cookie) => {
  const [key, val] = cookie.trim().split('=');
  acc[key] = val;
  return acc;
}, {});
console.log(cookies.user_token);

在Vue项目中实践用户认证

假设我们有一个登录功能，成功后将Token存入Cookie，后续请求自动携带。

登录逻辑示例

// src/api/auth.js
import axios from 'axios';
import Cookies from 'js-cookie';
export const login = async (username, password) => {
  try {
    const res = await axios.post('/api/login', { username, password });
    // 登录成功，存储Token到Cookie（有效期1天）
    Cookies.set('auth_token', res.data.token, { expires: 1 });
    return res.data;
  } catch (error) {
    throw new Error('登录失败');
  }
};

请求拦截器（自动携带Token）

// src/utils/request.js
axios.interceptors.request.use(config => {
  const token = Cookies.get('auth_token');
  if (token) {
    config.headers.Authorization = `Bearer ${token}`;
  }
  return config;
});

路由守卫检查登录状态

// src/router/index.js
router.beforeEach((to, from, next) => {
  const isAuthenticated = Cookies.get('auth_token');
  if (to.meta.requiresAuth && !isAuthenticated) {
    next('/login'); // 跳转到登录页
  } else {
    next();
  }
});

安全注意事项

虽然Cookie很方便，但使用不当会导致安全问题：

1. 敏感信息不要存Cookie：比如密码明文，尽量只存Token或Session ID。
2. 启用HttpOnly和Secure（后端设置）：防止XSS攻击和明文传输。
3. 设置合理的过期时间：避免Token长期有效。
4. 考虑CSRF防护：配合SameSite属性或后端CSRF Token。

在Vue中，通过js-cookie库可以轻松管理用户认证信息：

• 登录成功后存储Token到Cookie
• 通过axios拦截器自动附加到请求头
• 用路由守卫保护需要认证的页面

如果你需要更持久或更大容量的存储，可以结合localStorage，但记住敏感数据还是要谨慎处理，你的Vue应用已经能“用户了，体验直接上了一个档次！

（本文信息参考于2025年7月前端开发实践及安全建议）